Home/ Questions/Q 1808916
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T06:20:59+00:00

I am trying to make a directory which contains information in a div, some

  • 0

I am trying to make a directory which contains information in a div, some of this information is going to be hidden and some of it is going to be displayed. When you click the click me button for each directory it displays the hidden information as shown with the code example below,

Note: The information and divs will be generated by php coming from a database!

Html

<html>
        <head>
            <link href="style.css" type="text/css" rel="stylesheet" />
            <script type = "text/javascript" src ="jquery.js"></script>
            <script type = "text/javascript">
                $(document).ready(function() {
                    $(".toogle").click(function() {
                        $(".hiddenInfo").slideToggle("slow");
                    });
                });
            </script>
        </head>

        <body>
            <div class="roundtest">
                <p>
                    Hello World
                    <div class="hiddenInfo">
                        <p> Omg this is soooo hidden its amazing!</p>
                        <p> Omg this was also hidden, im so proud!</p>
                    </div>
                    <div class="toogle"> Click Me </div> 
                </p>
            </div>
            <br />
            <div class="roundtest">
                <p>
                    Hello World
                    <div class="hiddenInfo">
                        <p> Omg this is soooo hidden its amazing!</p>
                        <p> Omg this was also hidden, im so proud!</p>
                    </div>
                    <div class="toogle"> Click Me </div> 
                </p>
            </div>
    </body>
</html>

CSS

body {
        background-color:white;
}
.roundtest {
        font: 11px "Verdana", Arial, Helvetica, sans-serif;
        width: 400px;
        height: auto;
        border: 1px solid green;
        background-color: white;
        color: #333;
        -moz-border-radius: 5px;
        -webkid-border-radius: 5px;

        -moz-box-shadow:2px 2px 0 #c2c2c2;
        -webkit-box-shadow:2px 2px 0 #c2c2c2;
        box-shadow:2px 2px 0 #c2c2c2;
}
.hiddenInfo {
        display: none;
}

Now the problem is that I am going to be using php to output the information and divs and my problem as shown above is that if each div has the same name and I click show information from one directory, it shows all the divs information.

I could manually name each div with a different name e.t.c but that would be a problem when it comes to the jquery part. I guess i could code 10 different click codes and name each div class from a number of 1 to 10 (displaying 10 directoryies on 1 page) at a time, then that might fix the problem, im unsure,

Sorry for the bad explanation, any hints tips code examples would be helpful. Bare in mind i do not want to use libs, i want to learn by creating this myself.

Thank you!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In this case, you’d want to look up the appropriate content section by traversing the DOM inside the click event handler.

    $('.toogle').click( function() {
    // get the sibling node with class 'hiddenInfo'
    var mysection = $(this).prev('.hiddenInfo');
    mysection.slideToggle('slow');
});
    • 0