login  Naam:   Wachtwoord: 
Registreer je!
 Forum

show/hide jquery

Offline UpLink - 20/11/2013 14:40 (laatste wijziging 20/11/2013 14:49)
Avatar van UpLink... Beste SiMa's,

Ik ben al even aan het prutsen aan iets dat waarschijnlijk vrij simpel is, maar ik kom er voorlopig niet uit.

met 1 div werkt het perfect, maar nu wil ik dit met 5 div's doen en die werken niet met uitzondering die eerste.

JS:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script> 
  2. $(document).ready(function(){
  3.   $("#flip").click(function(){
  4.     $("#panel").slideToggle("slow");
  5.   });
  6. });
  7. </script>


HTML:
html code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="flip">1</div>

  2. <div id="panel">...</div>

  3.  
  4. <div id="flip">2</div>

  5. <div id="panel">....</div>

  6.  
  7. <div id="flip">3</div>

  8. <div id="panel">....</div>

  9.  
  10. <div id="flip">4</div>

  11. <div id="panel">....</div>

  12.  
  13. <div id="flip">5</div>

  14. <div id="panel">....</div>


ik gebruik volgende Jquery link:
html code - Bekijk de code zonder highlighting - Klap code in 
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


Iemand die mij verder kan helpen?

5 antwoorden

Gesponsorde links
Offline finduilas - 20/11/2013 15:15
Avatar van finduilas PHP gevorderde Id moet uniek zijn..

Je zal moeten werken met andere id's of classes..
Bedankt door: UpLink, WouterJ
Offline UpLink - 20/11/2013 20:11 (laatste wijziging 23/11/2013 01:17)
Avatar van UpLink ... M'n kop stond weer ergens anders natuurlijk... Bedankt...

//EDIT:

Ik heb nu alles wat ik moet hebben...

Ik zit alleen een beetje vast op het volgende:

Hoe sluit ik de ene automatisch weer als ik de andere openklik?

Ik heb nu het volgende:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script> 
  2. $(document).ready(function()
  3. {
  4.   $("#zkhond").click(function()
  5.   {
  6.     $("#panel").slideToggle("slow");
  7.   });
  8.   $("#khond").click(function()
  9.   {
  10.     $("#panel2").slideToggle("slow");
  11.   });
  12.   $("#mghond").click(function()
  13.   {
  14.     $("#panel3").slideToggle("slow");
  15.   });
  16.   $("#ghond").click(function()
  17.   {
  18.     $("#panel4").slideToggle("slow");
  19.   });
  20.   $("#exdienst").click(function()
  21.   {
  22.     $("#panel5").slideToggle("slow");
  23.   });
  24.  
  25. });
  26. </script>


Ik kan het dus openen en sluiten door te klikken. Nu moet ik alleen zien dat het ene weer sluit als er op een andere geklikt word.
Offline WouterJ - 23/11/2013 09:48
Avatar van WouterJ HTML gevorderde Oké, laten we meteen jouw code wat gaan verbeteren 

Allereerst heb je nu heeeeel erg veel duplicate code, zie je dat ook? Je verandert slechts tekens de selector. Nu kun je dat op 2 manieren oplossen:
1. Kijken of je dit beter kan aanpakken zonder duplicate code
2. 1 functie schrijven en die telkens aanroepen
Omdat je nog nieuw bent met jQuery zal jij waarschijnlijk voor (2) gaan, maar we gaan hier natuurlijk naar (1).

Allereerst gaan we de specifieke IDs weghalen en gebruiken we alleen 2 classes: .toggle-panel en .panel. Wat willen we dan bereiken? We willen dat de .panel direct na .toggle-panel getoggled wordt wanneer er op .toggle-panel wordt geklikt. Hoe bepalen we de .panel direct na .toggle-panel? Dat doen met met de jQuery: .next(selector) functie:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. jQuery(document).ready(function ($) {
  2.  
  3.     $('.toggle-panel').click(function (e) {
  4.         $(this).next('.panel').slideToggle('slow');
  5.     });
  6.  
  7. });


Dit ziet er stukken beter uit, vind je niet?

Nu gaan we je probleem oplossen. De andere panels moeten allemaal verborgen zijn, wanneer er 1 wordt geopend. Dit gaan we simpelweg doen door alle panels een jQuery: .slideUp(speed) mee en openen daarna de juiste:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. jQuery(document).ready(function ($) {
  2.  
  3.     var $panels = $('.panel'); // cachen, voor snelheid optimalisatie
  4.  
  5.     $('.toggle-panel').click(function (e) {
  6.         var $that = $(this); // cache deze this, aangezien die in de callback anders is
  7.  
  8.         $panels.slideUp('fast', function () {
  9.             $that.next('.panel').slideToggle('slow');
  10.         }
  11.     });
  12.  
  13. });
Offline UpLink - 23/11/2013 10:50
Avatar van UpLink ... Doe ik iets verkeerd want bij mij werkt jouw laatste JS-code niet bij mij.

Ik weet dat ik zeer veel duplicate code heb, maar dat was de enige manier dat ik het opgelost kreeg.
Offline WouterJ - 23/11/2013 11:40
Avatar van WouterJ HTML gevorderde Ietsje veranderd:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. jQuery(document).ready(function ($) {
  2.  
  3.      var $panels = $('.panel'); // cachen, voor snelheid optimalisatie
  4.  
  5.      $('.toggle-panel').click(function (e) {
  6.          $panels.slideUp('fast');
  7.          $(this).next('.panel').slideToggle('slow');
  8.      });
  9.  
  10.  });


Voorbeeld: http://jsfiddle.net/e9FjV/
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.18s