JQuery show hide

Door Ferdi R op 08-11-2014 19:30 gewijzigd op 08-11-2014 19:36

2.526 views

Ik heb dit stukje code die een div laat zien als je op een link klikt, als je er nog een keer op klikt komt de div weer terug maar de div moet dan juist weer verdwijnen.


    <script type="text/javascript">
    $(function(){
        $('.showSingle').click(function(){
	          $('.toggles').hide();
              $('.toggles').slideUp('slow');

              $('#togglediv'+$(this).attr('target')).slideToggle('slow');
              
              return false;
        });
    });
    </script>

HTML


      <button class="showSingle" target="showlinks" id="reslinks" type="submit"></button>
        <button class="showSingle" target="showvolgen" id="resvolgen" type="submit"></button>
        <button class="showSingle" target="showzoek" id="reszoek" type="submit"></button>

        <div id="toggledivshowlinks" class="toggles">
        div 1
        </div>
	    <div id="toggledivshowvolgen" class="toggles">
	      div 2
	    </div>
	    <div id="toggledivshowzoek" class="toggles">
	    div 3
	    </div>

Frank Nietbelangrijk

09-11-2014 01:08

Je javascript:

regel 4: verberg alle div's met de class toggles,
regel 5: slide up alle div's met de class toggles. Heeft geen zin want op regel vier zijn ze al verborgen gemaakt.
regel 7: slideToggle (langzaam te voorschijn komen) van de div met id togglediv.......

Bij de laatste regel komt dus één div te voorschijn als ie verborgen is of wordt verborgen als ie zichtbaar is (Toggle)
Echter wordt de div op regel 4 altijd verborgen en zal deze dus altijd op regel 7 weer te voorschijn komen.

Toevoeging op 09/11/2014 01:08:36:

Je javascript:

regel 4: verberg alle div's met de class toggles,
regel 5: slide up alle div's met de class toggles. Heeft geen zin want op regel vier zijn ze al verborgen gemaakt.
regel 7: slideToggle (langzaam te voorschijn komen) van de div met id togglediv.......

Bij de laatste regel komt dus één div te voorschijn als ie verborgen is of wordt verborgen als ie zichtbaar is (Toggle)
Echter wordt de div op regel 4 altijd verborgen en zal deze dus altijd op regel 7 weer te voorschijn komen.

Ferdi R

12-11-2014 12:11

Ik weet juist niet veel van javascript, hoe kan ik het aanpakken om het goed te krijgen.

Frank Nietbelangrijk

12-11-2014 13:17

Je mag eerst het gewenste resultaat eens goed omschrijven . De mogelijkheden zijn legio. Moet er bijv. 1 div tegelijk open of mogen ze allemaal open?

Ferdi R

12-11-2014 13:46

Er moet 1 div openen, zo werkt het stukje nu ook, als ik op een andere button klik gaat de ene weer dicht en de andere open, maar als ik de div die ik geopend heb weer dicht wil klikken via de button dan gaat de div dicht maar ook weer gelijk open. Deze zal dus dicht moeten blijven.

Frank Nietbelangrijk

12-11-2014 17:52 gewijzigd op 12-11-2014 17:58

Precies en dan werkt toggle niet zo heel handig.

Voor de duidelijkheid: Toggle laat de div zien als die verborgen is en verbergt hem als ie zichtbaar is.

Omdat je ze allemaal wilt verbergen en dan één wilt openen kun je dan beter geen toggle gebruiken.

Hier jouw voorbeeld wat uitgewerkt: http://codepen.io/anon/pen/VYwLKv

HTML:


<button class="showSingle" target="showlinks" type="submit">Links</button>
<button class="showSingle" target="showvolgen" type="submit">Volgen</button>
<button class="showSingle" target="showzoek" type="submit">Zoek</button>

<div id="showlinks" class="showSingle">
  div 1
</div>
<div id="showvolgen" class="showSingle hidden">
  div 2
</div>
<div id="showzoek" class="showSingle hidden">
  div 3
</div>

CSS:


.hidden {
  display:none;
}

JQuery:


$(function(){
  $('button.showSingle').click(function() {
    
    // bepaal welke div bij de button hoort
    var target = '#' + $(this).attr('target');
    
    // indien de div al zichtbaar is dan geen actie
    if($(target).is(':visible'))
      return false;
    
    // Alle div's verbergen
    $('div.showSingle').slideUp().delay(500);
    
    // En alleen de juiste div openen
    $(target).slideDown('slow');
    
    return false;
  });
});

Ferdi R

12-11-2014 23:00

Dit heb ik ervan gemaakt, de IF ELSE statement is het zelfde als php dus dat lukt me nog wel


 $(function(){
  $('button.showSingle').click(function() {
    
    // bepaal welke div bij de button hoort
    var target = '#' + $(this).attr('target');
    
    // Alle div's verbergen
    $('div.showSingle').slideUp().delay(500);
    
    // indien de div al zichtbaar is dan geen actie
    if($(target).is(':visible')){
      $(target).slideUp('slow');
    }else{
    
    
    // En alleen de juiste div openen
    $(target).slideDown('slow');
    return false;
    }
  });
});

Frank Nietbelangrijk

12-11-2014 23:27

Het verschil is dat je nu ook alle div's kunt sluiten. Als je dat wilt dan is dat prima.

Ferdi R

13-11-2014 13:47

Dat is inderdaad wat ik wou, heel erg bedank Frank.

Reageren

Inloggen om te reageren