PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
V

show/hide boomstructuur

Door Voornaam Achternaam op 10-04-2012 12:20 gewijzigd op 10-04-2012 12:20
1.923 views
is het mogelijk om met dit stukje code een boomstructuur te toggelen?


<script type="text/javascript">
 function show(id){
  if(document.getElementById(id).style.display=="none"){
  document.getElementById(id).style.display="block"
 }
 else{
  document.getElementById(id).style.display="none"
  }
 }
</script>

<a href="#null" onclick="show('id1')">meer</a> <input type="text" name="tekst" id="id1" style="display:none"> <br>


Wat ik graag zou willen is dat als ik op 'meer' klik, niet slechts dat ene inputveld opent, maar meerdere nieuwe keuzes waaronder nieuwe show/hides en inputvelden.

dus zoiets als

meer >
       show/hideknop1 >
                       show/hideknop1a >    
                                        inputveld1
                                        inputveld2
                       show/hideknop2a >                 
       show/hideknop2 > 
       show/hideknop3 >
etc
Bas Cost Budde
10-04-2012 12:28
Als je de deelboom die je wil laten zien in een div zet, of zoiets, kun je die in zijn geheel tonen/verbergen. Dat is dus vooral een kwestie van de indeling van je html.
Bas Cost Budde
10-04-2012 12:37
Tip: kijk ook even naar jQuery. Jouw script is, ehm, ouderwetsig.

Geef de a href="#null" ook een id, bijvoorbeeld "open1", zodat je die a vanuit je script kunt bereiken. Dan kan het zoiets worden als
<?php
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#open1').click(function() { toggle('id1') });
}
</script>
?>

en dan de onclick uit je a weghalen
V
Voornaam Achternaam
10-04-2012 13:12
Ik ben er inmiddels uit.
nogmaals bedankt, div was idd de key.
Wouter J
10-04-2012 13:21
Tip: kijk ook even naar jQuery. Jouw script is, ehm, ouderwetsig.

Complete onzin! Moeten we nu echt jQuery voor alles wat met JS te maken heeft gebruiken? Moeten we nu zelfs voor een simpele onclick 24kb aan jQuery inladen terwijl het met 9 regels raw JS ook kan??

Tevens is jou jQuery script nog fout ook:
1) Gebruik de jQuery toggle
2) cache id1
3) het is geen PHP, dus geen php tekens
4) laad jQuery van de google/jquery CDN met een local fallback (plaats het lokaal wel in een js map en hang er wel een versienummer aan)
Bas Cost Budde
10-04-2012 15:09
Vriendelijk van je, Wouter. Al kies je niet de vriendelijkste formulering. Ik zal de diverse overwegingen in het vervolg weer zelf bij mijn antwoord tikken.

De intentie van mijn uitdrukking "zoiets als" is het plaatsen van een schets.
Wouter J
10-04-2012 15:47 gewijzigd op 10-04-2012 15:47
Bas, sorry maar ik wordt ondertussen een beetje gek van al die mensen die overal voor naar jQuery grijpen. En het enige wat jij doet is doormiddel van jQuery een event binden, dat kun je ook gewoon zo met raw JS doen:
document.getElementById('my-elem').onclick = toggle('id1')


Ik vind jou formuleren trouwens ook niet 100%: 'ouderwetsig' Er is niks ouderwets aan raw JS, het is zelfs veel leuker als je opgegeven moment zelf dezelfde dingen kan met raw JS als met jQuery.

Maar toch, om het topic compleet te maken, als je het echt in jQuery wilt doen gebruik dan zoiets:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write(unescape('%3Cscript src="js/jquery-1.7.2.min.js"%3E%3C/script%3E'));</script>
<script>
jQuery(function($) {
  var $id1 = $('#id1');

  $('#openId1').click(function(e) {
    $id1.toggle('fast');
  });
});
</script>

Reageren

Inloggen om te reageren