uitklapbare "lijst"

Overzicht Reageren

Michel Koonen

Michel Koonen

11/12/2013 09:42:05
Quote Anchor link
Ik heb onderstaande code. Nu wil ik niet direct de hele lijst laten zien, maar zodra er op het "tweede punt" wordt geklikt, opent sub a en sub b. Iemand een idee hoe ik dit aanpak?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<ul>
<li>Eerste punt</li>
<li>tweede punt
<ol type="a">
<li>tweede punt, sub a</li>
<li>tweede punt, sub b</li>
</ol>
</li>
<li>derde punt</li>
</ul>
 
PHP hulp

PHP hulp

07/08/2022 18:39:06
 
Albert de Wit

Albert de Wit

11/12/2013 09:47:08
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
ol{
    display: none;
}
ul li:nth-child(2):focus + ol{
    display: inline-block;
}


Misschien een beter voorbeeld
Gewijzigd op 11/12/2013 10:04:59 door Albert de Wit
 
Michel Koonen

Michel Koonen

11/12/2013 11:30:42
Quote Anchor link
Mooi en simpel :-)

Is 't ook zo aan te passen dat ie ook inklapt bij een tweede keer klikken op "tweede punt" , zoals dat nu gebeurt bij 't klikken op 3e punt/1e punt
 
Bas IJzelendoorn

Bas IJzelendoorn

11/12/2013 11:48:41
Quote Anchor link
Je kan eventueel ook kijken naar Jquery Toggle()
 
Albert de Wit

Albert de Wit

11/12/2013 11:48:48
Quote Anchor link
Zeker! Dit is heel simpel door een checkbox check uit te voeren hierbij.

HTML
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<ul>
    <li>Punt 1</li>
    <li>
        <label for="uitklapper">Punt 2</label>
        <input type="checkbox" hidden id="uitklapper" class="uitklapper">
        <ol>
            <li><label for="uitklapper">Sub a</label></li>
            <li><label for="uitklapper">Sub b</label></li>
        </ol>
    </li>
    <li>Punt 3</li>
</ul>


CSS
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
ol{
    display: none;
}

.uitklapper:checked + ol{
    display: initial;
}


Hier een voorbeeld

Toevoeging op 11/12/2013 11:50:06:

Bas IJzelendoorn op 11/12/2013 11:48:41:
Je kan eventueel ook kijken naar Jquery Toggle()


Die is er ook, maar ik vind het zo mooi om het zonder javascript te doen :D.
Gewijzigd op 11/12/2013 12:03:11 door Albert de Wit
 
Michel Koonen

Michel Koonen

11/12/2013 21:46:45
Quote Anchor link
Ik heb het voorbeeld van Albert wat uitgebreid waarbij alle 1st level LI's zouden moeten kunnen worden uitgeklapt, maar dan werkt 't niet meer.. Ik kom er niet achter waar de "fout" zit.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ul>
        <li>
            <label for="uitklapper">Punt 1</label>
            <input type="checkbox" hidden id="uitklapper" class="uitklapper">
            <ol>
                <li><label for="uitklapper">1 a</label></li>
                <li><label for="uitklapper">1 b</label></li>
            </ol>
        </li>
        <li>
            <label for="uitklapper">Punt 2</label>
            <input type="checkbox" hidden id="uitklapper" class="uitklapper">
            <ol>
                <li><label for="uitklapper">2 a</label></li>
                <li><label for="uitklapper">2 b</label></li>
            </ol>
        </li>
        <li>
            <label for="uitklapper">Punt 2</label>
            <input type="checkbox" hidden id="uitklapper" class="uitklapper">
            <ol>
                <li><label for="uitklapper">3 a</label></li>
                <li><label for="uitklapper">3 b</label></li>
            </ol>
        </li>
    </ul>


PS. Aan de CSS heb ik niets aangepast.
 
Kris Peeters

Kris Peeters

12/12/2013 15:24:04
Quote Anchor link
Sta me even toe dat ik het met javascript doe.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('.uitklapper').click(function(e) {
      $(this).children('.uitklapper').toggle();
    })
  });
</script>
<style>
ol.uitklapper {
  display: none;
}
</style>
<ul>
  <li class="uitklapper">
      Punt 1
      <ol class="uitklapper">
          <li>1 a</li>
          <li>1 b</li>
      </ol>
  </li>
  <li class="uitklapper">
      Punt 2
      <ol class="uitklapper">
          <li>2 a</li>
          <li>2 b</li>
      </ol>
  </li>
  <li class="uitklapper">
      Punt 2
      <ol class="uitklapper">
          <li>3 a</li>
          <li>3 b</li>
      </ol>
  </li>
</ul>


Is dit ongeveer wat je wil?
 
Michel Koonen

Michel Koonen

13/12/2013 14:13:30
Quote Anchor link
yep... da's helemaal wat ik bedoel ! Dank :-)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.