login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Collapse script

Offline Yourgamecrew - 07/11/2012 17:18
Avatar van YourgamecrewLid hi,
Ik heb het volgende scriptje gevonden op internet. Het zorgt ervoor dat je een div kan verbergen en laten verschijnen. Nu zijn er zoals je ziet 3 verschillende functries voor 3 verschillende divs. Standaard zijn alle divs uitgeklapt. Nu wil ik dus dat standaard alleen de eerste div (season3) is uitgeklapt en de andere 2 niet maar hoe doe ik dat?

Script:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="javascript" type="text/javascript">
  2.     function displayDiv1()
  3.     {
  4.         var divstyle = new String();
  5.         divstyle = document.getElementById("season3").style.display;
  6.         if(divstyle.toLowerCase()=="block" || divstyle == "")
  7.         {
  8.             document.getElementById("season3").style.display = "none";
  9.         }
  10.         else
  11.         {
  12.             document.getElementById("season3").style.display = "block";
  13.         }
  14.     }
  15.  
  16. 	function displayDiv2()
  17.     {
  18.         var divstyle = new String();
  19.         divstyle = document.getElementById("season2").style.display;
  20.         if(divstyle.toLowerCase()=="block" || divstyle == "")
  21.         {
  22.             document.getElementById("season2").style.display = "none";
  23.         }
  24.         else
  25.         {
  26.             document.getElementById("season2").style.display = "block";
  27.         }
  28.     }
  29.  
  30. 	function displayDiv3()
  31.     {
  32.         var divstyle = new String();
  33.         divstyle = document.getElementById("season1").style.display;
  34.         if(divstyle.toLowerCase()=="block" || divstyle == "")
  35.         {
  36.             document.getElementById("season1").style.display = "none";
  37.         }
  38.         else
  39.         {
  40.             document.getElementById("season1").style.display = "block";
  41.         }
  42.     }
  43.     </script>

4 antwoorden

Gesponsorde links
Offline WouterJ - 07/11/2012 18:07
Avatar van WouterJ HTML gevorderde Ik zou 1 functie maken die je wat elementen kan meegeven:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function toggle(elem) {
  2.     var display = elem.style.display.toLowerCase();
  3.  
  4.     if ('block' == display && '' != $display) {
  5.         elem.style.display = 'none';
  6.     } else {
  7.         elem.style.display = 'block';
  8.     }
  9. }


Dit is sowieso wat sneller. Jij laadt 2 keer per functie de hele dom (dat is een array met alle elementen erin) doorzoeken naar #season1 terwijl je hem ook in een variabele kunt opslaan en je dus maar 1 keer hoeft te zoeken.

Om jou vraag te beantwoorden: Geef ze allemaal dezelfde class mee of zet ze allemaal in een herkenbaar script. Dan kun je dit doen:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. // stel we geven ze allemaal .panel mee
  2. var panels = document.getElementsByClassName('panel');
  3. // ook mogelijk:
  4. // var panels = document.querySelectorAll('.panel')
  5.  
  6. function toggle(elem) {
  7.     var display = elem.style.display.toLowerCase();
  8.  
  9.     // een foreach loop in JS
  10.     [].forEach.call(panels, function(panel) {
  11.         // verberg elk paneel
  12.         panel.style.display = 'none';
  13.     });
  14.  
  15.     if ('block' == display && '' != $display) {
  16.         elem.style.display = 'none';
  17.     } else {
  18.         elem.style.display = 'block';
  19.     }
  20. }
Bedankt door: Martijn
Offline Yourgamecrew - 07/11/2012 18:58
Avatar van Yourgamecrew Lid Bedankt voor je snelle reactie. Ik heb alleen nog wel een vraag want ik kan voor de verschillende divs toch niet aangeven welke er standaard wel en welke standaard niet weergeven worden met de code die jij me geeft (de 2e)? of wel?
Offline Martijn - 07/11/2012 19:47
Avatar van Martijn Crew PHP je kunt er 1 een id geven, id="DefaultOpen", en dan in de foreach zoiets doen:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. // een foreach loop in JS
  2. [].forEach.call(panels, function(panel) {
  3. // verberg elk paneel
  4. if(panel.id!='DefaultOpen'){
  5.     panel.style.display = 'none';
  6. }
  7. });


Of er een class aan geven, en met een beetje code de class eruit vissen, dan kun je er meerdere open zetten (#uniekID mag je maar aan 1 element toekennen, kan me voorstellen dat je er meer hebt of al een id hebt gegeven)
Bedankt door: Yourgamecrew
Offline WouterJ - 07/11/2012 22:08
Avatar van WouterJ HTML gevorderde Martijn, sneller zou het dan worden als je de forEach weghaalde:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. // ... voer functie uit
  2. document.querySelector('#defaultOpen').display = 'block';


Je kan de functie trouwens nog wat simpeler in gebruik maken:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. // stel we geven ze allemaal .panel mee
  2. var panels = document.getElementsByClassName('panel');
  3. // ook mogelijk:
  4. // var panels = document.querySelectorAll('.panel')
  5.  
  6. function toggle(elem) {
  7.     // als het nog geen element is, zoek hem dan bij id
  8.     // dit geeft ons de optie hem aan te roepen als
  9.     // toggle(document.getElementById(...)) of toggle(this)
  10.     // maar ook als
  11.     // toggle('#theId') of welke CSS selector dan ook
  12.     if (!elem.nodeName) {
  13.         elem = document.querySelector(elem);
  14.     }
  15.  
  16.     var display = elem.style.display.toLowerCase();
  17.  
  18.     // een foreach loop in JS
  19.     [].forEach.call(panels, function(panel) {
  20.         // verberg elk paneel
  21.         panel.style.display = 'none';
  22.     });
  23.  
  24.     if ('block' == display && '' != $display) {
  25.         elem.style.display = 'none';
  26.     } else {
  27.         elem.style.display = 'block';
  28.     }
  29. }
Bedankt door: Yourgamecrew
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.174s