jQuery open 1 div tegelijk.

[MrVegeta]

Ik heb het volgende stukje jQuery code in elkaar weten te zetten maar ik mis het laatste stapje.
Dit stukje jQuery zorgt ervoor dat span elementen die in <li> van de div #background_absolute_content staan klikbaar worden. Vervolgens worden er 2 acties aan de click gegeven. Actie 1 is de fadeOut van de class .toggle_hide en actie 2 is het fadeIn van de class.toggle hide.

Nu werkt dit zo goed als helemaal maar het probleem is dat de jQuery code geen onderscheid maakt in welke li de class .toggle_hide zit waardoor die simpel weg ook de huide link eerst verwijdert en dan laat zien. Klinkt misschien wat vaag maar hier kan je het in actie zien http://no-illusions.nl/projecten/friendchamp/backend.html (klik op de 2 social media buttons naast "Now compatible with" om het effect te zien)

JavaScript:

$(document).ready(function () {
            $('.toggle_hide').hide();

        $("#background_absolute_content li span").css('cursor', 'pointer').click(function(){
            var $this = $(this);
                    $('.toggle_hide').fadeOut(200, function(){ 
                    $this.next("div").fadeIn(200);
                });
        });
    });

Qua html is dit het idee.

HTML:

<div id="background_absolute_content">
<ul>
    <li class="active_linkedin">
        <span></span>
        <div class="toggle_hide">
            <p>Twitter configuration</p>
                <ul>
                    <li><input type="checkbox" name="checkbox" value="checkbox">Complete timeline</li>
                    <li><input type="checkbox" name="checkbox" value="checkbox">@Mentions</li>
                </ul>
            </div>
        </div>
    </li>
    <li class="active_linkedin">
        <span></span>
        <div class="toggle_hide">
            <p>Linkedin configuration</p>
                <ul>
                    <li><input type="checkbox" name="checkbox" value="checkbox">Complete timeline</li>
                    <li><input type="checkbox" name="checkbox" value="checkbox">@Mentions</li>
                </ul>
            </div>
        </div>
    </li>
</ul>
</div>

In de li elementen zit dus een <span> die klikbaar wordt, wanneer er word geklikt laat deze span de volgende div zien door een fadeIn en dat is prima. Maar in diezelfde klik zit dus ook een actie die een fadeOut doet op .toggle_hide maar ik wil dat deze alleen op li elementen buiten de huidige li omgaat.

[Verwijderd]

Volgens mij kan dit mooier en simpeler opgelost worden.

HTML:

<ul>
    <li>
        <a href="#">Twitter</a>
        <div>
            <p>Twitter configuration</p> 
            <ul> 
                <li><input type="checkbox" name="checkbox" value="checkbox">Complete timeline</li> 
                <li><input type="checkbox" name="checkbox" value="checkbox">@Mentions</li> 
            </ul>
        </div>
    </li>
</ul>

JavaScript:

$(document).ready(function(){
    $("ul li div").hide();
    $("ul li a").click(function(){
        $(this).next("div").slideToggle(500);
    });
});

Zo ff uit het hoofd, kan het hier niet testen. Maar volgens mij moet dit werken en is dit ook de kortste klap. Bovendien zit het semantisch ook goed in elkaar nu.

[MrVegeta]

Dat is sowieso wel vrij globaal, stel ik heb een div in een li die ik wel wil laten zien (oid). Ik zie eigenlijk ook niet hoe je er voor zorgt dat andere div's een hide status krijgen.

Ik heb geprobeerd om op jsFiddle mijn probleem te simuleren.
http://jsfiddle.net/YpeeR/7/

[ray538]

Als je gebruikt maakt van .not() kun je bepaalde elementen uitsluiten voor de functie die je gaat aanroepen. Wanneer je

JavaScript:

$('.toggle_hide')

veranderd in:

JavaScript:

$('.toggle_hide').not($this.next("div"))

Moet het volgens mij werken.

Edit:
Zie hier de aangepaste versie van je jsFiddle: http://jsfiddle.net/YpeeR/8/

[ Voor 21% gewijzigd door ray538 op 20-08-2011 14:39 . Reden: Typo's ]

[MrVegeta]

Aha! Dat ziet er goed uit ja! Volgens mij snap ik hem, je zegt dus not this next div. Dus voer deze actie niet uit op de volgende div maar wel alle voorgaande. Klopt dat?

[Caelorum]

MrVegeta schreef op zaterdag 20 augustus 2011 @ 14:42:
Aha! Dat ziet er goed uit ja! Volgens mij snap ik hem, je zegt dus not this next div. Dus voer deze actie niet uit op de volgende div maar wel alle voorgaandeoverige. Klopt dat?

lijkt me correcter.

[ray538]

Zoals Caelorum aangeeft, de actie word toegepast op alle overige elementen. $this.next("div") is namelijk de div die je in je eigen oorspronkelijke code al aanriep om weer te geven. Die div wil je niet verbergen, vandaar dat hij in is opgenomen in not(). Het feit dat er next() staat heeft alles te maken met jouw code om die specifieke div te tonen, niet met not(), Wanner je bij wijze van spreken alles wil verbergen behalve de onderliggende elementen dan had je not($this.children()) gebruikt.

PS. Waarom definieer je eigenlijk een variabele met een dollarteken? Het lijkt mij dat dat alleen maar voor verwarring zorgt icm. jQuery.

[ Voor 42% gewijzigd door ray538 op 20-08-2011 14:55 ]

[MrVegeta]

Het is alweer een poosje geleden dat ik me enigszins had verdiept in jQuery dus ik ben alweer wat dingen vergeten (helaas). Heb je misschien nog een tip voor het volgende,

ik heb het nu dus zo dat div's met de class .toggle_hide in overige elementen op hide gaan wanneer er een andere div wordt geopend en dat werkt prima maar ik zou graag wanneer je dus op span klikt van de div die al geopend is dat deze div zich weer op hide gaat.

Met deze code heb ik wel een simpele functie gemaakt die ik in die div kan zetten zodat deze zich sluit maar ik zou dus ook graag willen dat dat gebeurde wanneer je op het span element klikt.

JavaScript:

jQuery('.toggle_close').click(function(){
                $(".toggle_hide").fadeOut(200);
                });

http://jsfiddle.net/YpeeR/10/

maar ik wil die hide functie dus ook op het span element hebben waar ik de div mee laat zien. En helaas doet toggle het niet goed want dan fade die eerst uit, dan weer in en dan weer uit.

Zou het een idee zijn om via jQuery het aangeklikte span element een link te geven die gekoppeld is aan een hide functie. Ik ga het uitzoeken...

[ Voor 7% gewijzigd door MrVegeta op 20-08-2011 17:28 ]

[ray538]

Het is enigzins appart dat de toggle niet werkt, ik kan de oorzaak zo snel niet achterhalen. Wat je wel altijd kunt doen is een een soort toggle met de hand maken:

JavaScript:

if($this.next("div").is(":visible")){
     $this.next("div").hide();
}else{
     $this.next("div").show();
}

Waar bij hide en show natuurlijk voorzien kunnen worden van de nodige easings, of vervangen kunnen worden door fade.

jsFiddle: http://jsfiddle.net/YpeeR/15/

[MrVegeta]

Als je op jou Fiddle die hide/show aanpast dan gaat de div weer flashen. Maar Iemand op Stackoverflow heeft het antwoord gevonden. Het probleem lag aan de function op het einde waardoor de code werd herhaald...

Werkt goed

JavaScript:

jQuery(document).ready(function() {
    jQuery('.toggle_hide').hide();

    jQuery("#background_absolute_content li span").css('cursor', 'pointer').click(function() {
        var $this = $(this);        
        $('.toggle_hide').not($this.next("div")).fadeOut(200);
        $this.next("div").fadeToggle(200);
    });
});

Werkt minder goed

JavaScript:

$(document).ready(function() {
     jQuery('.toggle_hide').hide();

     jQuery("#background_absolute_content li span").css('cursor', 'pointer').click(function(){
     var $this = $(this);
          $('.toggle_hide').not($this.next("div")).fadeOut(200, function() {
          $this.next("div").toggle(200);
          });
       });
});

[ Voor 12% gewijzigd door MrVegeta op 20-08-2011 18:37 ]

[MrVegeta]

Even een bumpje, ugh door wat styling gedoe kan ik een div die ik wil faden niet meer naast de span element zetten het moet er een paar elementen voor waardoor die this.next niet meer werkt, ik dacht ik doe even simpel met this.prev maar dat werkt ook niet

http://jsfiddle.net/nRD4L/6/

[R4gnax]

MrVegeta schreef op zondag 21 augustus 2011 @ 13:42:
Even een bumpje, ugh door wat styling gedoe kan ik een div die ik wil faden niet meer naast de span element zetten het moet er een paar elementen voor waardoor die this.next niet meer werkt, ik dacht ik doe even simpel met this.prev maar dat werkt ook niet

http://jsfiddle.net/nRD4L/6/

http://jsfiddle.net/nRD4L/7/

Ik zou als ik jou was toch echt onderhand eens wat tijd steken in het leren werken met de traversal API van jQuery, want het is toch echt kennis van het beginnersniveau.

[MrVegeta]

Ja, ik wil (en ga) me ook verder verdiepen in jQuery wanneer het komende schooljaar weer begint maar ik heb nu even een klein projectje die ik dacht even snel af te ronden maar er is een hoop verandert/vergeten in de afgelopen ~8 maand dat ik niet met jQuery heb gewerkt.

Die Fiddle van je werkt wel goed alleen heb ik een klein foutje gemaakt in de opbouw van de div's.

Met deze opbouw werkt het script prima

HTML:

<div class="wrapper_update">
    <div class="update_content">
        <div class="social_media_updates_extended_view">
            <p>Karel de Bruin</p>
        </div>
        <div class="wrapper_update_extend">
            <div class="update_extend">
                <span class="btnFadeIn">fade button span</span>
            </div>
        </div>
    </div>
</div>

Maar det deze opbouw werkt het script niet omdat ik hier de div #update_content afsluit en daardoor zit de div #wrapper_update_extend" niet meer in #update_content. Waardoor die .closest functie niet meer goed werkt.

HTML:

<div class="wrapper_update">
    <div class="update_content">
        <div class="social_media_updates_extended_view">
            <p>Karel de Bruin</p>
        </div>
        <p>content</p>
    </div>
    <div class="wrapper_update_extend">
        <div class="update_extend">
            <span class="btnFadeIn">fade button span</span>
        </div>
    </div>
</div>

Het script zoekt een element die die nu niet meer kan vinden.

JavaScript:

(function($, undefined) {
    $(document).ready(function() {
        var $container = $(".wrapper_update");

        $container.find(".social_media_updates_extended_view").hide();

        $container.delegate(".update_extend .btnFadeIn", "click", function(event) {
            var $view = $(this).closest(".wrapper_update_extend").prev(".social_media_updates_extended_view").stop(true).fadeToggle(200);

            $container.find(".social_media_updates_extended_view").not($view[0]).stop(true).fadeOut(200);
        })
    })
})(jQuery);

http://jsfiddle.net/nRD4L/12/

He! gefixed, niet slecht.

JavaScript:

        $(document).ready(function() {
            var $container = $(".wrapper_update");

            $container.find(".social_media_updates_extended_view").hide();

            $container.delegate(".update_extend .btnFadeIn", "click", function(event) {
                var $view = $(this).closest(".wrapper_update").find(".social_media_updates_extended_view").fadeToggle(200);

                $container.find(".social_media_updates_extended_view").not($view).fadeOut(200);

            });

        });

[ Voor 16% gewijzigd door MrVegeta op 21-08-2011 18:38 ]

[Guillome]

Waarom niet gewoon dit in je click function:

JavaScript:

        $('.toggle_hide:visible').fadeOut(200);
        $this.next("div").fadeIn(200);