Hide/show

Kevin · 13 februari 2015

Beste,

Ik ben momenteel met een script bezig.
Dit script heeft een Hide / Show functie, echter staat het standaard op Show.
Ik wil de functie op "Hide" hebben zodat het onderste gedeelte ingeschoven is, Ik kan helaas zelf niet in het script vinden waar de fout zit..

Hier heb ik ook een voorbeeld, momenteel ziet het er zo uit:

En het moet er zo uitzien dat het onderste gedeelte weg is, zodat er meerdere onder elkaar kunnen komen:

Dit is het script:

Code

<div class="button" id="button2" onClick="button2()" class="buttonControl" aria-controls="t2">
    
                    <div class="img"><img src="http://www.smaffia.nl/ingame/images/vlaggen/amerika.png" width="17" height="14" border="0" alt="Amerika"> </div>
                    <div class="land">Amerika</div>
                    <div class="bezit">KOGELFABRIEK</div>
                    <div class="kogels-img"></div>
                    <div class="kogels">1.000</div>
                    <div class="produceren">Nee</div>
                    <div class="prijs">&euro; 250,-</div>    
                    <div class="bank">&euro; 0,-</div>
                    <div class="omzet-img"><img src='images/gebruiker/bank.png' alt='bank'></div>
                    <div class="omzet">&euro; 0,-</div>
                    <div class="slide"><img src='images/arrow-down.png' width="17" border="0" alt="slide"></div>
                 
</div>


<div id="t2" class="topic" role="region" aria-labelledby="t2-label" tabindex="-1" aria-expanded="false">
   
                    
                    <h2>STATISTIEKEN</h2>
                    <div class="content-sub-divider"></div>


                    <table>
                        <tr>
                            <td width="20px"><img src="images/icons/icon-content-upgrades.png" alt="img" /></td>
                            <td width="200px">Prijs</td>
                            <td width="200px">&euro; 250,- </td>
                        </tr>
                        <tr>
                            <td width="20px"><img src="images/icons/icon-content-connectielevel.png" alt="img" /></td>
                            <td width="200px">Verkocht</td>
                            <td width="200px">0 kogels</td>
                        </tr>
                        <tr>
                            <td width="20px"><img src="images/icons/icon-content-uurloon.png" alt="img" /></td>
                            <td width="200px">Winst</td>
                            <td width="200px">&euro; 0,-</td>
                        </tr>
                    </table>
                    
                    <br />
                    <h2>ACTIVEREN</h2>
                    <div class="content-sub-divider"></div>
                    <br />
                    
                    <table>
                        <tr>
                            <td width="20px"><img src="images/gebruiker/robot.png" width="90%" alt="img" /></td>
                            <td width="200px">Produceren van kogels</td>
                            <td width="200px">
                                <select name="produceren">
                                    <option value="Ja">Ja</option>
                                    <option value="Nee">Nee</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td width="20px"><img src="images/gebruiker/koop.png" width="90%" alt="img" /></td>
                            <td width="200px">Inkopen van kogels</td>
                            <td width="200px">
                                <select name="inkopen">
                                    <option value="Ja">Ja</option>
                                    <option value="Nee">Nee</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td width="20px">&nbsp;</td>
                            <td width="200px">&nbsp;</td>
                            <td width="200px">&nbsp;</td>
                        </tr>
                        <tr>
                            <td width="20px"><img src="images/save.png" width="90%" alt="img" /></td>
                            <td width="200px">Opslaan</td>
                            <td width="200px"><input class="submit" id="submit" onclick="myFunction()" value="De gegevens opslaan"/></td>
                        </tr>
                    </table>
                    
                    <br />
                    <h2>CONFIGURATIE</h2>
                    <div class="content-sub-divider"></div>
                    <br />
                    
                    <table>
                        <tr>
                            <td width="20px"><img src="images/gebruiker/inkoop.png" width="90%" alt="img" /></td>
                            <td width="200px">Inkoop prijs</td>
                            <td width="200px"><input type="number" id="name" min="0" max="1000" step="1" value="250"></td>
                        </tr>
                        <tr>
                            <td width="20px"><img src="images/gebruiker/prijs.png" width="90%" alt="img" /></td>
                            <td width="200px">Verkoop prijs</td>
                            <td width="200px"><input type="number" name="points" id="name" min="0" max="1000" step="1" value="250"></td>
                        </tr>
                        <tr>
                            <td width="20px">&nbsp;</td>
                            <td width="200px">&nbsp;</td>
                            <td width="200px">&nbsp;</td>
                        </tr>
                        <tr>
                            <td width="20px"><img src="images/save.png" width="90%" alt="img" /></td>
                            <td width="200px">Opslaan</td>
                            <td width="200px"><input class="submit" id="submit" onclick="myFunction()" value="De gegevens opslaan"/></td>
                        </tr>
                    </table>
        
            
</div>

Toon Meer

En dit is het stukje Javascript:

Code

$(document).ready(function() {


   var hs1 = new hideShow('button1');
   var hs2 = new hideShow('button2');
   var hs3 = new hideShow('button3');
   var hs4 = new hideShow('button4');
  
}); // end ready()


//
// function hideShow() is the constructor for a hideShow widget. it accepts the html ID of
// an element to attach to.
//
// @param(id string) id is the html ID of the element to attach to
//
// @return N/A
//
function hideShow(id) {


   this.$id = $('#' + id);
   this.$region = $('#' + this.$id.attr('aria-controls'));


   this.keys = {
               enter: 13,
               space: 32
               };


   this.toggleSpeed = 100;


   // bind handlers
   this.bindHandlers();


} // end hidShow() constructor


//
// Function bindHandlers() is a member function to bind event handlers to the hideShow region
//
// return N/A
//
hideShow.prototype.bindHandlers = function() {


   var thisObj = this;


   this.$id.click(function(e) {


      thisObj.toggleRegion();


      e.stopPropagation();
      return false;
   });
}


//
// Function toggleRegion() is a member function to toggle the display of the hideShow region
//
// return N/A
//
hideShow.prototype.toggleRegion = function() {


      var thisObj = this;


    // toggle the region
    this.$region.slideToggle(this.toggleSpeed, function() {


      if ($(this).attr('aria-expanded') == 'false') { // region is collapsed


        // update the aria-expanded attribute of the region
        $(this).attr('aria-expanded', 'true');


        // move focus to the region
        $(this).focus();


        // update the button label
        thisObj.$id.find('span').html('Hide');


      }
      else { // region is expanded


        // update the aria-expanded attribute of the region
        $(this).attr('aria-expanded', 'false');


        // update the button label
        thisObj.$id.find('span').html('Show');
      }
    });


} // end toggleRegion()

Toon Meer

Hopend kan iemand mij helpen.

Met vriendelijke groeten,
Kevin

Dees · 13 februari 2015

Je kan dit heel makkelijk doen met jQuery (zorg wel dat jQuery toegevoegd is in je code):

Code

<script>
$(document).ready(function() {
    $('.slide').click(function() {
        $('.topic').slideToggle();
    });
});
</script>

Kevin · 14 februari 2015

Hoe bedoel je precies?

Ik wil graag dat de balk standaard dicht is zodat ik meerdere balken onder elkaar kan neerzetten.
De mensen die het willen gebruiken kunnen op de balk klikken om deze te openen (naar beneden schuiven).

Graag hoor ik van u.

Met vriendelijke groeten,
Kevin

Dees · 14 februari 2015

Ik heb heel snel dit scriptje geschreven. Kan zijn dat het niet helemaal werkt. Had niet heel veel tijd.

HTML

<html>
    <head>
        <title>Script</title>
        <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
        <style>
            .hide {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="slides">
            <div class="slide">
                balk
                <div class="hide">
                    test
                </div>
            </div>
            <div class="slide">
                balk
                <div class="hide">
                    test
                </div>
            </div>
            <div class="slide">
                balk
                <div class="hide">
                    test
                </div>
            </div>
            <div class="slide">
                balk
                <div class="hide">
                    test
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                $('.slides .slide').click(function() {
                    $(this).find('.hide').slideToggle();
                });
            });
        </script>
    </body>
</html>

Toon Meer

Kevin · 16 februari 2015

Ik snap wat je bedoelt, ik heb echter nu een code om meerdere balken apart van elkaar te laten lopen.

Dat niet alle balken opengaan als je op 1 balk klikt, hierin moet een stukje komen dat het onderste gedeelte ingeschoven is.

Zoals nu ziet het er momenteel zo uit:

De volgende jQuery code:
In het script hieronder wordt button1, button2, etc.. aangegeven, dit is de balk die er staat als "KOGELFABRIEK".
zo kan ik bijv. als button2 de balk VLIEGVELD maken etc..

Code

<script type="text/javascript">
$(document).ready(function() {


   var hs1 = new hideShow('button1');
   var hs2 = new hideShow('button2');
   var hs3 = new hideShow('button3');
   var hs4 = new hideShow('button4');
  
}); // end ready()


//
// function hideShow() is the constructor for a hideShow widget. it accepts the html ID of
// an element to attach to.
//
// @param(id string) id is the html ID of the element to attach to
//
// @return N/A
//
function hideShow(id) {


   this.$id = $('#' + id);
   this.$region = $('#' + this.$id.attr('aria-controls'));


   this.keys = {
               enter: 13,
               space: 32
               };


   this.toggleSpeed = 100;


   // bind handlers
   this.bindHandlers();


} // end hidShow() constructor


//
// Function bindHandlers() is a member function to bind event handlers to the hideShow region
//
// return N/A
//
hideShow.prototype.bindHandlers = function() {


   var thisObj = this;


   this.$id.click(function(e) {


      thisObj.toggleRegion();


      e.stopPropagation();
      return false;
   });
}


//
// Function toggleRegion() is a member function to toggle the display of the hideShow region
//
// return N/A
//
hideShow.prototype.toggleRegion = function() {


      var thisObj = this;


    // toggle the region
    this.$region.slideToggle(this.toggleSpeed, function() {


      if ($(this).attr('aria-expanded') == 'false') { // region is collapsed


        // update the aria-expanded attribute of the region
        $(this).attr('aria-expanded', 'true');


        // move focus to the region
        $(this).focus();


        // update the button label
        thisObj.$id.find('span').html('Hide');


      }
      else { // region is expanded


        // update the aria-expanded attribute of the region
        $(this).attr('aria-expanded', 'false');


        // update the button label
        thisObj.$id.find('span').html('Show');
      }
    });


} // end toggleRegion()
</script>

Toon Meer

Als het standaard op verbergen staat kan ik meerder balken toevoegen wat er dan zo eruit komt te zien:

Zou iemand kunnen helpen de code aan te passen?

Met vriendelijke groeten,
Kevin

Dees · 16 februari 2015

Ik snap je uitleg niet helemaal. Maar als ik het goed begrijp, dan wil je dit:

Er zijn (bijvoorbeeld) vier balken. Deze zijn standaard dicht. Klik je er op één dan gaat deze open. Klik je op een andere moeten de balk die open is dicht gaan en de balk waar op geklikt is open gaan.

Klopt dit?

Kevin · 16 februari 2015

Ja correct, dat is mijn bedoeling inderdaad.

Dees · 16 februari 2015

Dan moet (met het voorbeeld van gisteren) deze code werken:

Code

$(document).ready(function() {
  $('.slides .slide').click(function() {
    $('.slides .slide .hide').slideUp();
    $(this).find('.hide').slideDown();
  });
});

Kevin · 16 februari 2015

Yes top!

Dank u.

Dees · 16 februari 2015

Graag gedaan! Heb je nog vragen dan hoor ik ze graag.

Kevin · 2 Maart 2015

Beste scripters,

Het script om het heen en weer te laten gaan functioneert nu goed, echter is er wel een probleem.

Als ik de slide uitvouw, en hier een tekst of button in plaats en hier vervolgens op klik vouwt de slide weer in en uit. (vouwt in en uit)

Ik wil dat de slide gewoon uitgevouwen blijft, ook al heb ik een button erin om iets bij te kunnen werken in de database.

De jQuery code:

Code

<script type="text/javascript">
$(document).ready(function() {
  $('.slides .slide').click(function() {
    $('.slides .slide .hide').slideUp();
    $(this).find('.hide').slideDown();
  });
});
</script>

De HTML code:

Code

<div class="slide">
                  <div class="sliden"> 
                    <div class="img">".vlag_land($beheer['land'])."</div>
                    <div class="land">".land($beheer['land'])."</div>
                    <div class="bezit">".$beheer['object']."</div>
                    <div class="kogels-img"></div>
                    <div class="kogels">".geld_formaat($beheer['aantal'])."</div>
                    <div class="produceren">".$produceren."</div>
                    <div class="prijs">&euro; ".geld_formaat($beheer['prijs']).",-</div>    
                    <div class="bank">&euro; ".geld_formaat($beheer['bank']).",-</div>
                    <div class="omzet-img">".$omzet."</div>
                    <div class="omzet">&euro; ".$winst.",-</div>
                    <div class="slider"><img src='images/arrow-down.png' width="17" border="0" alt="slide"></div>
                    
            </div>
                <div class="hide">
                   <h2>STATISTIEKEN</h2>
                   
                   </div>
                   </div>

Toon Meer

DNS update Directadmin

PC probleem

Let op Vimexx klanten

wie kan mij helpen met Security aanscherpen voor nmijn website

Ik ben op zoek naar een goede hosting

App bouwer gezocht

4G met USB Dongle - windows 11 Chrome of Firefox - browser probleem

Hosting en websites op maat

Xenforo buckaroo plugin

300+ Nieuwe domeinnamen Maart 2024

Actieve crime

Hide/show

Participate now!

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Het Belang van Standaardisatie

De Revolutionaire Rol van IT in Alzheimeronderzoek

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2

Delen

Gebruikers die dit topic bekijken