Hide/show

Kevin

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

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

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

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

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

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

Ja correct, dat is mijn bedoeling inderdaad.

Dees

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

Yes top!

Dank u.

Dees

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

Kevin

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

ICTscripters

Dé plek voor IT

Dé plek voor IT

Na 15 jaar terug van weggeweest: iCriminals.nl is terug (BETA)!

Developer Gezocht

Op zoek naar de legends

[FREE] WeFact Hosting module

Help testers nodig voor android app Urgent

Versio vervanger

Afspraken systeem met planbeperking

Partner Gezocht om meerdere NFT Collecties op Open Sea te Plaatsen

321 Nieuwe Domeinnamen December 2025

Meerdere mafia game template te koop

Van een pixelige afbeelding naar een strakke, moderne website

Hide/show

Participate now!

Fijne feestdagen

Kritieke update voor Really Simple Security-plug-in

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Functioneel ontwerp

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

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

Gebruikers die dit topic bekijken