zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden toggle mehrer Divs bei Klick auf Button

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.10.2016, 14:50
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2005
Beiträge: 63
Fanello befindet sich auf einem aufstrebenden Ast
Standard toggle mehrer Divs bei Klick auf Button

Liebe xhtmlforum-Community

Ich habe auf einer Website rechts am Rand 3 Buttons untereinander platziert.
- Kontakt
- News
- Suche

Wenn ich auf einen dieser Buttons klicke, kommt das entsprechende Div von rechts ins Bild. Wenn ich auf den selben Button klicke, verschwindet das Div wieder. Das funktioniert soweit alles.

Nun wäre es aber noch besser, dass das offene Div verschwindet, sobald man eins der anderen beiden Buttons klickt. Z.B. hätte was also das Suchen-Div sichtbar; wenn ich jetzt auf den News-Button klicke, verschwindet das Suchen-Div und stattdessen erscheint eben das News-Div.

Ist das mit meinem bisherigen Code überhaupt machbar?

HTML-Code:
<script>
var toggle_contact  = document.getElementById("toggle-contact");
var toggle_news  = document.getElementById("toggle-news");
var toggle_search  = document.getElementById("toggle-search");
var content_contact = document.getElementById("content-contact");
var content_news = document.getElementById("content-news");
var content_search = document.getElementById("content-search");    

toggle_contact.addEventListener("click", function(){
content_contact.classList.toggle("appear");
}, false);
toggle_news.addEventListener("click", function(){
content_news.classList.toggle("appear");
}, false);
toggle_search.addEventListener("click", function(){
content_search.classList.toggle("appear");
}, false);
</script>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.10.2016, 15:57
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 628
etux wird schon bald berühmt werden
Standard

Von JavaScript und jQuery habe ich nicht wirklich Ahnung, aber zum Rumprobieren reicht es gerade:
HTML-Code:
<!doctype html>
<meta charset="utf-8">
<title>Fanello :: xhtmlforum.de</title>
<style>
div div { display: none; padding: 1em; font-size: 2em; color: white; background-color: red; }
div .show { display: inline-block; }
</style>
<ul>
	<li class="kontakt">Kontakt</li>
	<li class="news">News</li>
	<li class="suche">Suche</li>
</ul>
<div>
	<div class="kontakt">Kontakt</div>
	<div class="news">News</div>
	<div class="suche">Suche</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
	$( 'li' ).click( function() {
		$class_value = '.' + $(this).attr('class');
		$( 'div' ).find( $class_value ).toggleClass( 'show' );
		$( 'div' ).find( 'div' ).not( $class_value ).removeClass( 'show' );
	});
</script>
Vielleicht hilft's Dir.
__________________
Grüße: Emil
--------------------------------------
http://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.10.2016, 16:51
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2005
Beiträge: 63
Fanello befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von etux Beitrag anzeigen
Vielleicht hilft's Dir.
Ja das hilft mir auf jeden Fall, es macht nämlich genau das was ich gerne hätte – DANKE!
Nur muss ich jetzt aufpassen, im CSS ist ja definiert, dass div div nicht erscheint. Wenn ich das so in die Seite einbaue, fehlen einiges an Inhalt, weil die Situation div div doch ein paar mal vorkommt.

Ich könnte das umgehen, in dem ich dem ersten div eine Klasse zuweise, also z.B.
HTML-Code:
<div class="slider">
	<div class="kontakt">Kontakt</div>
	<div class="news">News</div>
	<div class="suche">Suche</div>
</div>
Im CSS wäre es dann
HTML-Code:
div.slider div { display: none; padding: 1em; font-size: 2em; color: white; background-color: red; }
Mir ist aber nicht ganz klar, wie ich nun diese div im JS ansprechen kann.

HTML-Code:
		$( 'div.slider' ).find( $class_value ).toggleClass( 'show' );
		$( 'div.slider' ).find( 'div' ).not( $class_value ).removeClass( 'show' );
So funktioniert es z.B. nicht...
Mit Zitat antworten
  #4 (permalink)  
Alt 31.10.2016, 16:58
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 628
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von Fanello Beitrag anzeigen
So funktioniert es z.B. nicht...
jQuery hast Du auch eingebunden?
__________________
Grüße: Emil
--------------------------------------
http://emil-webdesign.net/
Mit Zitat antworten
  #5 (permalink)  
Alt 31.10.2016, 17:18
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 628
etux wird schon bald berühmt werden
Standard

Hier noch ein Beispiel.
Klassen sind nicht nötig, es zählt nur die Reihenfolge.
! Aber auch auf jQuery Basis!
HTML-Code:
<!doctype html>
<meta charset="utf-8">
<title>Fanello :: xhtmlforum.de</title>
<style>
.slider { padding: 0; list-style: none; overflow: hidden; background-color: gray; }
.slider div {
	position: relative;
	float: left;
	width: 100%;
	margin-bottom: -100%;
	margin-left: 100%;
	font-size: 2em;
	padding: 2em 0;
	text-align: center;
	color: white;
	background-color: blue;
	transition: margin-left .4s ease-in .1s;
}
.slider div:first-child { background-color: green; }
.slider div:last-child { margin-bottom: 0; background-color: red; }
.slider .show { z-index: 1; margin-left: 0; }
</style>
<ul class="list">
	<li>Kontakt</li>
	<li>News</li>
	<li>Suche</li>
</ul>
<div class="slider">
	<div>Kontakt</div>
	<div>News</div>
	<div>Suche</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>	
jQuery(document).ready(function() {
	jQuery( '.list li' ).on( 'click', function() {
		
		$li = $(this).index();
		$ta = $( '.slider' ).find( 'div' ).eq( $li );
		
		$( $ta ).toggleClass( 'show' );
		$( '.slider' ).find( 'div' ).not( $ta ).removeClass( 'show' );
	});
});
</script>
__________________
Grüße: Emil
--------------------------------------
http://emil-webdesign.net/

Geändert von etux (31.10.2016 um 17:22 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 01.11.2016, 11:09
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 628
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von etux Beitrag anzeigen
jQuery hast Du auch eingebunden?
... oder die zweite CSS-Zeile ausgelassen?
Zitat:
Zitat von etux Beitrag anzeigen
HTML-Code:
<style>
.....
div .show { display: inline-block; }
</style>
In Deinem Fall dann:
Code:
div.slider .show { display: inline-block; }
Gewöhne Dich aber bitte daran, bei Fragen den kompletten relevanten Code zu posten


.
__________________
Grüße: Emil
--------------------------------------
http://emil-webdesign.net/
Mit Zitat antworten
  #7 (permalink)  
Alt 02.11.2016, 11:46
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2005
Beiträge: 63
Fanello befindet sich auf einem aufstrebenden Ast
Standard

etux, vielen Dank für deine Inputs!

Habe es jetzt dank dir schlussendlich so gelöst:

HTML-Code:
<style>
.slider div {
    background: #203a70;
    padding: 10px;
    position: absolute;
    right: 0;
		visibility: hidden;
    opacity: 0;
    transition: 0.6s;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-transition: 0.6s;
    transform: translateX(300px);
    -webkit-transform: translateX(300px);
    -webkit-box-shadow: 0px 10px 8px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 10px 8px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 10px 8px 0px rgba(0, 0, 0, 0.25);
    color: #fff;
}

div .appear {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
}
</style>


<button id="kontakt" class="btn btn-primary icon-contact">Kontakt</button>
	<button id="news" class="btn btn-primary icon-news">News</button>
	<button id="suche" class="btn btn-primary icon-search">Suche</button>


	<div class="slider">
		<div class="kontakt">Kontakt</div>
		<div class="news">News</div>
		<div class="suche">Suche</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script>
		$( 'button' ).click( function() {
			$class_value = '.' + $(this).attr('id');
			$( '.slider' ).find( $class_value ).toggleClass( 'appear' );
			$( '.slider' ).find( 'div' ).not( $class_value ).removeClass( 'appear' );
		});
	</script>
Macht nun genau das was ich gerne hätte.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
FadeOut FadeIn mehrer DIV's andre-ne Javascript & Ajax 8 15.03.2013 17:18
jQuery slidetoggle mehrer divs skip23 Javascript & Ajax 1 29.03.2011 10:53
Text im Button - verschiebt sich bei Klick (IE6) monran CSS 12 12.11.2009 19:29
Box Inhalt durch klick auf Button austauschen.. wakeua CSS 1 25.05.2009 18:45
Button funktioniert nur beim 1. Klick!?? priester Javascript & Ajax 2 09.12.2006 19:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:17 Uhr.