[jQuery] linken naar 'next'-div mogelijk?

[Duncank]

Op mijn site gebruik ik een while om teksten uit een database op te halen en die in een div weer te geven. Ik krijg dus een aantal keer onderstaand blok op mijn pagina:

code:

<a href="#" class="toggle">In/uitklappen</a>
<div class="admin-item">
   <p>Met hier de tekst uit de database</p>
</div>

De tekst in de div is vaak vrij lang, en vandaar de toggle-link die er bij een klik voor moet zorgen dat de div inklapt tot een hoogte van 150px. Zo is er dus wel nog wat van de content te lezen, maar niet alles.

Dit kan met jquery door .toggleClass("maxheight") toe te voegen, waarbij maxheight in mijn css als class gespecificeerd staat met height : 150px;


Tot zover werkt het, het probleem start echter ook nu;

Wanneer ik op de link klik, klappen alle div's met de class admin-item in/uit.
Normaal zou ik hiervoor $(this) gebruiken om de toggle aan toe te voegen, maar dat gaat dan alleen om t geklikte item, en dat is de link in dit geval. En hier zou de div die erop volgt moeten staan.

Probleem 2 is dat wanneer er op de link geklikt wordt de div in 1 keer verspringt van originele grootte naar 150px, terwijl we van jQuery zo'n mooie slides gewend zijn. Ook deze krijg ik er niet in, want wanneer je met dingen als .slideUp/Down en .toggle gaat werken, verdwijnt de hele div, en dus ook die 150px die ik wil laten staan.

code:

$(function() {
   $('a.toggle').click(function() {
       $(".admin-item").toggleClass("maxheight")
    });
});

Zo ziet ie er dus nu uit, en ik wil hem alleen de eerste div met class admin-item na die "a" laten toggle-en, en dit met een mooie slide doen. Heeft iemand een idee voor me? Want met de jQuery documentation kom ik hierin ook niet echt verder.

[Verwijderd]

Volgens mij zoek je next().

JavaScript:

$('a.toggle').click(function() {
    $(this).next(".admin-item").toggleClass("maxheight");
});

[Kiphaas7]

^^Met Blues, maar om een wat algemener antwoord te geven, wat jij wil is Traversing.

[BtM909]

Volgende keer even wat beter door de documentatie heen browsen

http://docs.jquery.com/

[Duncank]

dat is m inderdaad!

Wel grappig, ik heb nog met next zitten experimenteren.

Maar nu werkt het! Ik heb in plaats van toggleClass toch slideToggle gebruikt nu, voor de mooie overgang. Dankje!

[Duncank]

Ben nu een stuk verder en wil dit effect nogmaals toepassen op de pagina.

code:

// toggle admin-items
    $(function() {
        $("span.toggle").click(function () {
               $(this).nextAll("div.admin-item").slideToggle("slow");
            });
    });

// toggle link-items
    $(function() {
        $("span.linktoggle").click(function () {
               $(this).nextAll("div.linkspagina").slideToggle("slow");
            });
    });

De code ziet er zo uit, en het togglen van admin-items werkt, het togglen van link-items ook, maar alleen als ik (this).nextAll weghaal uit de code. Dan togglen al die div's op de pagina, en niet alleen degene waar ik op klikte. Hoe kan dit? Moet ik hiervoor een andere selector als 'this' gebruiken ofzo?

[Bosmonster]

nextAll geeft je ALLE volgende divs met de class linkspagina. Waarom gebruik je nextAll als je maar 1 item wilt hebben? (tenzij ik je verkeerd begrijp)

[Duncank]

.nextAll geeft bij de admin-items echt alleen maar de div na de link waar ik op klik hoor, maar ik heb het vervangen door .next en dat werkt ook. Klinkt ook wat logischer inderdaad.

Wat niet wil zeggen dat het probleem bij de link-items nu is opgelost. Deze werkt echt alleen wanneer ik (this).nextAll / (this).next weghaal uit de code zoals in mijn vorige post. Maar dan togglen ze allemaal.

[Kiphaas7]

Waarom doe je het 2x in een onload functie? Of ben ik te moe op dit moment?

En er zit wel degelijk een verschil in next() en nextAll(). Overigens staat dit ook zeer duidelijk op de site van jquery (waar we je net nota bene een link voor gaven!). Vergeet even niet dat je ook je resultaten filtert of het wel een div is met class admin-item... Probeer maar eens nextAll() ipv nextAll("div.admin-item") en je zult zien dat er wel daadwerkelijk verschil is...

http://docs.jquery.com/Traversing/next#expr

next only returns the very next sibling for each element, not all next siblings (see nextAll). You may provide an optional expression to filter the returned set.

JavaScript:

$(document).ready(function(){
    //Toggle admin-items
        $("span.toggle").click(function () {
            $(this).next("div.admin-item").slideToggle("slow");
        });

    //Toggle link-items
        $("span.linktoggle").click(function () {
            $(this).next("div.linkspagina").slideToggle("slow");
        });
});

[ Voor 12% gewijzigd door Kiphaas7 op 29-04-2009 21:29 ]

[Duncank]

2 keer die onload is inderdaad niet nodig, maar met een enkele is ook niets opgelost. Nog steeds hetzelfde verhaal. Wanneer ik (this).next weghaal bij de link-items toggle werkt alles, hij toggled dan alle divs met de class linkspagina.

Wanneer ik ze omdraai, en dus link-items bovenaan zet en admin-items onderaan, hetzelfde verhaal.
Ook wanneer ik het admin-items toggle-script wegdoe werkt het bij de link-items nog niet.. voor het geval een dubbel script ofzo niet zou werken (beetje radeloos he )
Op een of andere manier pakt ie de (this).next gewoon niet bij de linkitems...

-Edit, en ik heb t nogmaals geprobeerd. In mijn situatie veranderd .nextAll helemaal niets.

[ Voor 24% gewijzigd door Duncank op 29-04-2009 23:09 . Reden: probeersel toegevoegd ]

[Kiphaas7]

Dit klinkt, en ruikt vaag (voor mij). Kan je toevallig iets online zetten?

[DeluxZ]

Heb je je code toevallig inline staan ? Ik heb afgelopen week nog zitten klooien met jQuery fancybox en de jQuery Cycle plugin. Als ik de code inline had staan werkte maar één van de twee functies. Ik heb het toen allebei in een aparte .js bestand gezet en deze in de html gelinked en toen werkte ze allebei.

Ik weet niet of het hier aan ligt, maar je zou het kunnen proberen

Het ging bij mij om deze code

JavaScript:

$('#project-wrapper')
        .before('<div id="slider-buttons">')
        .cycle({ 
            fx: 'scrollLeft',
            speed:    900, 
            timeout:  8000,
            next:   '#previous', 
            prev:   '#next',
            pager:  '#slider-buttons',
            pause: 1 
        });

$(document).ready(function() {
    $("a.fancybox").fancybox();
});

[Duncank]

De code staat niet inline, ik heb dit wel geprobeerd als oplossing, maar heb m nu toch weer in een los .js bestand staan. Mag niet baten.

Ik ga even werken aan een voorbeeld dat ik jullie kan tonen hier, de betreffende pagina is namelijk alleen beschikbaar voor mensen die ingelogd zijn.

[Duncank]

Okej, ik heb de pagina gestript en gezorgd dat jullie m ook zonder wachtwoord kunnen bekijken. Ik heb alle css, javascripts en voor deze pagina overbodige code eruit gehaald, en het blijkt dus dat ook daarvan niets het script tegenhoud om uit te voeren. Nog steeds werkt de toggle alleen wanneer (this).next er niet staat.

http://bcpush.nl/admin/test.php

[Kiphaas7]

1) Volgens mij gebruik je br's om te zorgen dat je content op een nieuwe regel komt. Dat doe je dus met css, tenzij het ok daadwerkelijk text betreft.... In dit geval zou ik gewoon een display:block doen op je span.

2) je allereerste item naast je toggle is nu een br. (die overbodig is, zie punt 1).

3) Zelfs met de br weg, ben je er nog niet. Als de br wordt weggehaald, zal next (zonder filter!) de div met class="topdiv" pakken. Logisch dat er dus niks gebeurt, want je filtert op een div met class="linkspagina".

Je zult dus verder moeten traversen met behulp van bijvoorbeeld children():

JavaScript:

$(document).ready(function(){ 
    //Toggle admin-items 
        $("span.toggle").click(function () { 
            $(this).next("div.admin-item").slideToggle("slow"); 
        }); 

    //Toggle link-items 
        $("span.linktoggle").click(function () { 
            $(this).next().children().children("div.linkspagina").slideToggle("slow"); 
        }); 
});

[Duncank]

@kiphaas7
Dat is t! Het lag inderdaad aan de br, die ik gebruikte als line-break. Dit heb ik nu vervangen door de span een display:block te geven, en met het toevoegen van de .children-tags in de functie werkt het nu perfect! Dankjewel voor je hulp! Ik ga nu overal br's verwijderen (Weer wat geleerd, wist dat namelijk nog niet)