XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   toggle mehrer Divs bei Klick auf Button (http://xhtmlforum.de/showthread.php?t=73054)

Fanello 28.10.2016 14:50

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>


etux 29.10.2016 15:57

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.

Fanello 31.10.2016 16:51

Zitat:

Zitat von etux (Beitrag 550067)
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...

etux 31.10.2016 16:58

Zitat:

Zitat von Fanello (Beitrag 550068)
So funktioniert es z.B. nicht...

jQuery hast Du auch eingebunden?

etux 31.10.2016 17:18

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>


etux 01.11.2016 11:09

Zitat:

Zitat von etux (Beitrag 550069)
jQuery hast Du auch eingebunden?

... oder die zweite CSS-Zeile ausgelassen?
Zitat:

Zitat von etux (Beitrag 550067)
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


.

Fanello 02.11.2016 11:46

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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:29 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023