|
|||
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> |
Sponsored Links |
Sponsored Links |
|
|||
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> HTML-Code:
div.slider div { display: none; padding: 1em; font-size: 2em; color: white; background-color: red; } HTML-Code:
$( 'div.slider' ).find( $class_value ).toggleClass( 'show' ); $( 'div.slider' ).find( 'div' ).not( $class_value ).removeClass( 'show' ); |
|
||||
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> Geändert von etux (31.10.2016 um 17:22 Uhr) |
|
|||
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> |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |