Jquery, open klappen div - arrow veranderen.

[MrVegeta]

Heerlijke topictitel weer maar goed, ik ben bezig met een website en het gaat heel aardig. Code is verre van optimaal maar daar draait het nu nog niet om.

http://no-illusions.nl/prototype/agenda_view1.html

Op de website zie je rechts een 2tal div's staan onder de tekst "4 updates". Als je er op klikt zie je mooi dus de extra info, harstikke goed maar het pijltje blijft stug naar rechts wijzen terwijl ik die naar onder wil laten wijzen wanneer de extra informatie verschijnt.

Mijn Jquery kennis gaat op het moment niet verder dan dingen in de website en het uiterlijk er van aanpassen, dus functies bewerken en/of schrijven is nog een stapje te ver maar ik zou dit er nog graag bij willen hebben.

Oh en bonus punten voor diegene die mij kan vertellen hoe ik zo'n div na het openklappen weer dicht kan krijgen door nogmaals op de naam van het bewuste persoon te klikken.

Voor de accordeon module gebruik ik deze Jqeury,
http://no-illusions.nl/prototype/js/jquery.msAccordion.js

En dat is het stukje code waar de accordeon module in staat.

HTML:

<div id="accordion3" class="accordionWrapper">
    <div class="pane">
        <div class="set set1">
        <img src="images/cross.png" alt="delete" class="delete" style="margin-top:15px; margin-left:190px;"/>
            <div class="agenda_white_profiel_info">
                <div class="title"><h3><img style="float: left; margin-right: 4px; margin-top:5px;" src="images/arrow-right.png"/>Rene Heite</h3><p>do 10 juni om 15:30 - 16:30</p></div>
                <div class="content"><p>Rene zegt: POP Bespreking. Afspraak gezien -- X</p> </div>
            </div>
        </div>
    </div>

    <div class="pane">
        <div class="set set1">
        <img src="images/cross.png" alt="delete" class="delete" style="margin-top:15px; margin-left:190px;"/>
            <div class="agenda_grey_profiel_info">
                <div class="title"><h3><img style="float: left; margin-right: 4px; margin-top:5px;" src="images/arrow-right.png"/>Kees Plattel</h3><p>do 10 juni om 15:30 - 16:30</p></div>
                <div class="content"><p>Kees zegt: POP Bespreking.<br/>Afspraak gezien -- X</p></div>
            </div>
        </div>
    </div>
</div>

Het is prima mogelijk om het pijltje als achtergrond in een div te plaatsen en dan zou het misschien mogelijk zijn om die div (met het pijltje) van achtergrond te laten veranderen wanneer er dus op de link wordt geklikt om de div open te klappen, maar hoe ik dit schrijf/zoek/maak etc is mij net wat te moeilijk.

[disjfa]

Stap 1 is geen externe scripts gebruiken voor zoiets simpels, gewoon een slideUp/Down aanroepen van de elementen.
Stap 2 is de image aanroepen en de src aanpassen.

En de gouden tip is checken op de :visible

Maar voor al deze tips moet je kaas hebben gegeten van javascript (een beetje) en jquery.

[Bosmonster]

Dat pijltje kun je veel beter (en hoort eigenlijk ook) in CSS gedefinieerd te worden ipv inline image. In dat geval kun je het ook eenvoudig met de CSS-class veranderen.

[Manuel]

^^ eens met disjfa en Bosmonster.. Tegen dit probleem ben ik ook eens aangelopen, heb het toen opgelost door slideUp en slideDown een callback mee te geven. (Om hier namelijk een accordion voor te gebruiken is overkill als je het mij vraagt )

.slideUp([duration], [callback]) - jQuery API
.slideDown([duration], [callback]) - jQuery API

[MrVegeta]

Bosmonster schreef op vrijdag 11 juni 2010 @ 08:42:
Dat pijltje kun je veel beter (en hoort eigenlijk ook) in CSS gedefinieerd te worden ipv inline image. In dat geval kun je het ook eenvoudig met de CSS-class veranderen.

Dat zei ik toch ook of niet? Het pijltje in een div plaatsen en de achtergrond veranderen, sowieso is de code verre van optimaal/netjes, dat komt later wel.

Maar de vraag is, hoe kan ik dat doen?

@hierboven, bedankt maar dat soort dingen gaan mij nog net wat te ver, ik heb nog nooit iets met JS geprogrammeerd.

[ Voor 10% gewijzigd door MrVegeta op 11-06-2010 12:13 ]

[Manuel]

Dit is gewoon standaard jQuery en werkt even simpel als een nieuw script toe te voegen. Neem voor je eigen gemak en ervaring eens een tutorial van jQuery door.

[BtM909]

MrVegeta schreef op vrijdag 11 juni 2010 @ 12:13:


@hierboven, bedankt maar dat soort dingen gaan mij nog net wat te ver, ik heb nog nooit iets met JS geprogrammeerd.

Dan wordt 't stiekem wel tijd dat je er wat moeite in gaat steken

Met de kreten van hierboven kan je zeker weten (ja, want ik kwam net een kant-en-klare oplossing tegen) verder worden geholpen met code.

Mocht je specifieke vragen hebben nav wat je hebt gevonden, dan mag je gerust hier verder vragen

[Bosmonster]

MrVegeta schreef op vrijdag 11 juni 2010 @ 12:13:
[...]


Dat zei ik toch ook of niet? Het pijltje in een div plaatsen en de achtergrond veranderen, sowieso is de code verre van optimaal/netjes, dat komt later wel.

Maar de vraag is, hoe kan ik dat doen?

Als je accordion gebruikt zal die vast een class op de li zetten van welke open is. Dus dan heb je helemaal geen extra javascript nodig.

Doe je het zelf, dan kun je vast wel even in de documentatie duiken en de addClass en removeClass functies bekijken

[MrVegeta]

Nee dat doet die niet, anders had ik dan wellicht kunnen veranderen. Ik ga wel wat door die site heen kijken... jammer dat het niet logisch is (tenminste voor mij) in tegen stelling tot CSS, als ik bij CSS zeg, dat element moet zo groot zijn, BAM, dan is die zo groot.

Met JS moet het allemaal weer met 4 verschillende haakjes, 10 verschillende termen! UGH.

[ Voor 52% gewijzigd door MrVegeta op 11-06-2010 15:13 ]

[Bosmonster]

MrVegeta schreef op vrijdag 11 juni 2010 @ 15:12:
Nee dat doet die niet, anders had ik dan wellicht kunnen veranderen.

Anders kun je met die accordion plugin ook nog zelf die class toevoegen/verwijderen on open/close event.

[MrVegeta]

http://www.learningjquery.com/, ik ga hier even wat dingen op doorkijken. Zoals hierboven wordt gezegd is het ook wel eens tijd voor mij dat ik me er in ga verdiepen .

[NiteSpeed]

MrVegeta schreef op vrijdag 11 juni 2010 @ 15:12:
Nee dat doet die niet, anders had ik dan wellicht kunnen veranderen. Ik ga wel wat door die site heen kijken... jammer dat het niet logisch is (tenminste voor mij) in tegen stelling tot CSS, als ik bij CSS zeg, dat element moet zo groot zijn, BAM, dan is die zo groot.

Met JS moet het allemaal weer met 4 verschillende haakjes, 10 verschillende termen! UGH.

Met JavaScript en zeker met jQuery kan je heel makkelijk CSS aanpassen. Pas de CSS van de elementen aan op basis van bijvoorbeeld de class 'uitgeklapt' of 'ingeklapt'. Sterker nog, ingeklapt heb je niet nodig. Je kan ook kijken of iets de class uitgeklapt heeft. Is die er niet? Dan is hij dus ingeklapt .

Als je vormgeving kan aanpassen met CSS moet je dat ook doen ook.

[MrVegeta]

Ugh, hetzelfd gedoe als Actionscript/Flash met parents etc, wat had ik daar een hekel aan. Ik heb nu dit stukje code en opzich snap ik het ook wel.

JavaScript:

    <script> //<![CDATA[    
    // When the page is ready
    $(document).ready(function(){
    
    
      $(".article .thebody").hide("");
    // Opent de tekst
      $(".article .thebody").hide("slow");
    // Zet de link er in.
      $("#container .article ul")
        .prepend("<li class='readbody'><a href='' title='Read the article'>Read Body</a></li>");
        
    // Zet de tekst weer terug
      $(".actions li.readbody a").click(function(event){
        $(this).parents("ul").prev(".thebody").toggle("slow");
       
        // Stop the link click from doing its normal thing
        event.preventDefault();
     });
   });
    //]]></script>

Daar hoort dit stukje HTML bij,

HTML:

 <div id="container">
   <div class="article">
     <h3>Title 01</h3>
     
     <p class="summary">Summary 01</p>
     <p class="thebody">Lorem ipsum....</p>
     
     <ul class="actions">
       <li><a href="">comment</a></li>
       <li><a href="">Trackback</a></li>
     </ul> 
     
   </div>
   
   <div class="article">
     <h3>Title 02</h3>
     
     <p class="summary">Summary 02</p>
     <p class="thebody">Lorem ipsum....</p>
     
     <ul class="actions">
       <li><a href="">comment</a></li>
       <li><a href="">Trackback</a></li>
     </ul>
   </div>
 </div>

Nu probeer ik al een poosje de knop;
"<a href='' title='Read the article'>Read Body</a>"
werkend op een andere positie te krijgen, bijvoorbeeld onder de H3 tag.

Als ik dit verander,

JavaScript:

 // Zet de link er in. 
      $("#container .article ul") 
        .prepend("<li class='readbody'><a href='' title='Read the article'>Read Body</a></li>"); 

naar,

JavaScript:

// Zet de link er in. 
      $("#container .article h3") 
        .prepend("<li class='readbody'><a href='' title='Read the article'>Read Body</a></li>"); 

Dan plaatst 'ie de knop dus wel boven de H3 tag maar dan werkt de knop niet meer vanwege het parent gebeuren wat verder in het script gebeurd. Hoe kan ik dus ipv parent te gebruiken meteen een div oid aanwijzen?

[Rekcor]

Sowieso zou ik 'jQuery' gebruiken i.p.v. $

JavaScript:

$("#container .article h3");        //kan problemen geven met andere frameworks
jQuery('#container .article h3'); //namespacing is your friend

gebruiken i.p.v. $

Hoe kan ik dus ipv parent te gebruiken meteen een div oid aanwijzen?

Als je iedere div een unique id meegeeft, kan het heel gemakkelijk. Verwijzingen als deze gebruiken:

JavaScript:

$(this).parents("ul").prev(".thebody")

is m.i. vragen om problemen, omdat die aannames doen over hoe de DOM er precies uitziet. Het kan dus maar zo dat ik - stel ik neem jouw website overneem - er nietsvermoedend iets tussenzet, om er vervolgens achter te komen dat al die knoppen niet meer werken.

[ Voor 31% gewijzigd door Rekcor op 11-06-2010 17:59 . Reden: waarschuwing ]

[MrVegeta]

Ja dat lijkt mij sowieso iets wat vervelend, misschien handig bij kleine dingen.

JavaScript:

    // Zet de tekst weer terug
      jQuery(".actions li.readbody a").click(function(event){
        jQuery(this).parents("ul").prev(".thebody").toggle("slow");

Ik heb hier nog even moeite mee, wat ik er van begrijp is dat de eerste jQuery actie de class "readbody a" zoekt in de "li" tag van de class "actions".

Daarna zegt 'ie dat als er op de link wordt geklikt dat er een event moet gebeuren (namelijk toggle).

JavaScript:

 jQuery(this).parents("ul").prev(".thebody").toggle("slow");

(this) is waar de actie begint, dan pakt 'ie de parent van waar die nu inzit namelijk de "ul" en dan prev(ious parent) class "thebody" waar de tekst instaat en die toggled die dan. Dat lijkt mij te gebeuren, maar hoe kan ik nou zorgen dat ik niet met die parents etc hoef te werken?

[Lye]

Rekcor schreef op vrijdag 11 juni 2010 @ 17:54:
Sowieso zou ik 'jQuery' gebruiken i.p.v. $

JavaScript:

$("#container .article h3");        //kan problemen geven met andere frameworks
jQuery('#container .article h3'); //namespacing is your friend

gebruiken i.p.v. $

Waarom zou je meerdere frameworks gebruiken... Ik neem toch aan dat je aan een framework genoeg hebt, meerdere frameworks is gewoon kopieren van functionaliteit en sowieso vragen om problemen.

[MrVegeta]

Ik ben een eind op weg om mijn idee voor elkaar te krijgen,

http://no-illusions.nl/prototype/test2.html

Hier heb ik nu dus een div die open en dicht klapt, een pijltje dat verandert van richting en een knop om de div weg te halen!

Maar ik ben (natuurlijk) nog niet klaar hé en ik loop wel weer wat vast. Ik wil namelijk meerdere div's gebruiken om open en dicht te klappen. Maar om nou voor elke div een apparte class/script etc te maken lijkt mij erg onhandig.

Als je nu op toggle aan/uit klikt gaan beide divs (begrijpelijk) open/dicht. Hoe kan ik zorgen dat alleen de geklikt div open/dicht gaan?

JavaScript:

        <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery(".changeText").click(function() {
            jQuery("#textBox").slideToggle("slow");
            });
            
            jQuery(".pane .delete").click(function(){
            jQuery(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
            });
            
            jQuery(".changeText").click(function () {
            jQuery(this).children(".arrow").toggle();
            return false;
            });
        });
    </script>

HTML:

            <div class="pane">
    <a class="changeText">
        <span class="arrow"><img src="images/arrow-right.png" alt="+" /></span>
        <span class="arrow" style="display: none;"><img src="images/arrow-down.png" alt="-" /></span>
        Toggle aan/uit
    </a>
        <img src="images/cross.png" alt="delete" class="delete"/>
        <br/><br/>

        <div class="textBox">
            asd</br>
            asd</br>
            asd</br>
            asd</br>
            asd</br>
        </div>
    </div>
    
    <div class="pane">
    <a class="changeText">
        <span class="arrow"><img src="images/arrow-right.png" alt="+" /></span>
        <span class="arrow" style="display: none;"><img src="images/arrow-down.png" alt="-" /></span>
        Toggle aan/uit
    </a>
        <img src="images/cross.png" alt="delete" class="delete"/>
        <br/><br/>

        <div class="textBox">
            asd</br>
            asd</br>
            asd</br>
            asd</br>
            asd</br>
        </div>
    </div>

[MrVegeta]

Flink wat lopen googlen etc maar ik heb het voor elkaar door met "this" te werken, wel wat ingewikkeld maar okay.

http://no-illusions.nl/prototype/test2.html

Het enige wat ik nu nog wel doen is dat er steeds maar 1 div open kan zijn, dus wanneer je op de andere klikt dat de vorige dicht gaat.

[NiteSpeed]

-

[ Voor 99% gewijzigd door NiteSpeed op 12-06-2010 19:28 ]

[NiteSpeed]

MrVegeta schreef op vrijdag 11 juni 2010 @ 20:19:

JavaScript:

        <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery(".changeText").click(function() {
            jQuery("#textBox").slideToggle("slow");
            });
            
            jQuery(".pane .delete").click(function(){
            jQuery(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
            });
            
            jQuery(".changeText").click(function () {
            jQuery(this).children(".arrow").toggle();
            return false;
            });
        });
    </script>

MrVegeta schreef op vrijdag 11 juni 2010 @ 23:54:
Flink wat lopen googlen etc maar ik heb het voor elkaar door met "this" te werken, wel wat ingewikkeld maar okay.

http://no-illusions.nl/prototype/test2.html

Het enige wat ik nu nog wel doen is dat er steeds maar 1 div open kan zijn, dus wanneer je op de andere klikt dat de vorige dicht gaat.

Lelijke oplossing, maar werkt wel: Niet zo heel lelijk achteraf .
In de functie kan je een siblings() gebruiken om alle broertjes van het element dicht te klappen.

JavaScript:

$(document).ready(function() {
    $('elementwatjeopenthier').slideToggle().siblings('allelementendiedichtmoetenhier').slideUp();
});

[MrVegeta]

Hm, maar alles "elementwatjeopenthier" is hetzelfde als "alleelementendiedichtmoeten" namelijk ".textBox".

Dus als ik nu op "changetext" druk dan klapt 'ie hem meteen weer dicht,
http://jsbin.com/uduzi/3/edit (toffe site trouwens)

Ik ga wel even rondkijken op dat siblings gebeuren .

[NiteSpeed]

Kijk even naar deze code, en vul hem aan met je eigen scripts. Het verwijderen en alles heb ik er tijdelijk uit gehaald namelijk:

JavaScript:

//Klik op een dingetje
      jQuery(".changeText").click(function() {
//Pak de tekstbox die bij dit dingetje hoort
          jQuery(this).find('.textBox').slideToggle();
//Pak de parent van dit dingetje(container), pak daar alleen de siblings van(alles wat dicht moet gaan) en klap deze omhoog.
          jQuery(this).parents().siblings().find('.textBox').slideUp();
      });//CLICK

http://jsbin.com/uduzi/6

[ Voor 57% gewijzigd door NiteSpeed op 12-06-2010 19:28 ]

[MrVegeta]

Wauw, dat werkt inderdaad helemaal goed!

JavaScript:

            jQuery(".changeText").click(function() {
            jQuery(this).find('.textBox').slideToggle();
            jQuery(this).parents().siblings().find('.textBox').slideUp();
            });

Even kijken of ik het helemaal begrijp, want dat gebeuren met children, parents en nu blijkbaar ook siblings is wel lastig.

De eerste regel is duidelijk, ".changeText" is een class met een clickfunctie.
In die functie zoek 'ie naar de class ".textBox" en voert ".slideToggle uit op de aangeklikte "changeText" (door de (this).
De 3e regel zorgt ervoor dat ".textBox" een slideUp krijgt. Maar waar is die parent dan voor? Die sibling zal er wel voor zijn omdat 'ie de "broers" van ".textBox" zoekt.

Heb ik dat wat goed?
In ieder geval erg bedankt . Was behoorlijk frustrerend om zo dichtbij "klaar" te zijn en het laatste dat net niet lukt.

[NiteSpeed]

MrVegeta schreef op zaterdag 12 juni 2010 @ 19:58:
Wauw, dat werkt inderdaad helemaal goed!

JavaScript:

            jQuery(".changeText").click(function() {
            jQuery(this).find('.textBox').slideToggle();
            jQuery(this).parents().siblings().find('.textBox').slideUp();
            });

Even kijken of ik het helemaal begrijp, want dat gebeuren met children, parents en nu blijkbaar ook siblings is wel lastig.

De eerste regel is duidelijk, ".changeText" is een class met een clickfunctie.
In die functie zoek 'ie naar de class ".textBox" en voert ".slideToggle uit op de aangeklikte "changeText" (door de (this).
De 3e regel zorgt ervoor dat ".textBox" een slideUp krijgt. Maar waar is die parent dan voor? Die sibling zal er wel voor zijn omdat 'ie de "broers" van ".textBox" zoekt.

Heb ik dat wat goed?
In ieder geval erg bedankt . Was behoorlijk frustrerend om zo dichtbij "klaar" te zijn en het laatste dat net niet lukt.

1 en 2 snap je zo te zien wel.
3 is een beetje verwarrend.

JavaScript:

jQuery(this).parents().siblings().find('.textBox').slideUp();

In de function kijkt hij wat (this) is. Dat is changetext. Hij pakt van (this) de parent. Dat is de container. Je wilt alleen niet iets met de container doen, maar met de containers van de siblings (broertjes, zusjes, elementen die op dezelfde 'hoogte' in de DOM zitten). Je pakt dus die siblings(), en pakt in de siblings() vervolgens alle elementen die .textBox heten. Die geef je een slideUp() en klaar .

[R4gnax]

NiteSpeed schreef op zaterdag 12 juni 2010 @ 20:29:

Hij pakt van (this) de parent.

Dan wil je de parent() functie hebben en niet de parents() functie. De eerste neemt van elk element in de set het directe parent element. De tweede neemt van elk element in de set de complete keten van ancestor elementen, helemaal terug omhoog naar de root v/d DOM tree.

[NiteSpeed]

R4gnax schreef op zaterdag 12 juni 2010 @ 21:59:
[...]


Dan wil je de parent() functie hebben en niet de parents() functie. De eerste neemt van elk element in de set het directe parent element. De tweede neemt van elk element in de set de complete keten van ancestor elementen, helemaal terug omhoog naar de root v/d DOM tree.

Goeie. Vooral qua performance scheelt dit enorm. Slordigheidsfoutje.

[MrVegeta]

NiteSpeed schreef op zaterdag 12 juni 2010 @ 19:26:
http://jsbin.com/uduzi/6

Ik loop nog tegen een kleine bug aan,
http://jsbin.com/uduzi/3/edit

Alles klapt uit/in wanneer het moet. Het kruisje verwijdert de geselecteerde div ook prima en zelfs het pijltje gaat op en neer maar dat gaat nog niet helemaal lekker.

Als ik op de eerste div klik dan gaat het pijltje prima naar beneden wijzen (in plaats van naar rechts). Klik ik op de div daaronder dan gaat die eerste div wel dicht maar het pijltje verandert niet, die blijft dus naar onder wijzen ipv naar rechts te gaan.

Is hier nog een oplossing voor?

Waar ik aan zit te denken is om alle plaatjes met de class "arrow" in de class "container" terug te laten zetten naar "arrow-right.png" behalve natuurlijk diegene die net is geklikt. Dus opzich is dat net zoiets als mijn vorige probleem.

Eens kijken of ik wat kan vinden.

[MueR]

Goed, je bent nu wel genoeg aan het handje mee genomen. Ik gooi dit topic dicht.