CODEWITHSUNDEEP
jqueryhtmlcss
Eleanordum
Eleanordum

Reputation: 125

flip panel using jquery

I am trying to make a web page and in this page i want to have 5 divs. I made a flip panel, so when i click on the title, the rest of the text must appear. The first div works, but when i click on the second one's title, the rest of it doesn't appear.

This is the script that i am using:

<script>
$(document).ready(function){
$("#flip").click(function(){
$("#panel").slideToogle("slow");
});
});
</script>

This is my CSS code:

    #panel,#flip
{
padding:0px;
text-align:center;
background-color:#C0C0C0  ;
border:solid 3px #C0C0C0 ;
border-radius:25px;
width: 800px;

}
#panel
{
padding:6px;
display:none;
}

And this is the HTML part:

<center>
<div id="flip"><h3>title</h3></div>
<div id="panel">
 etc etc etc...some text here
</div></center>
<br>
<center>
<div id="flip"><h3>title</h3></div>
<div id="panel">
etc etc etc
 </div></center>

Why do you think that the first one is working and the second one isn't? Thank you!

Upvotes: 0

Views: 1382

Answers (2)

Leandro Papasidero
Leandro Papasidero

Reputation: 3738

You are using multiple IDs in the same page (they should be unique), in other words, you can not have multiple IDs in the same page. In order to make it works, you need to change them to class="flip" and class="panel". I change parts of the HTML and JS.

You might have to make some small changes in your CSS.

Some recommendation, DO NOT use <CENTER> tag, it is deprecated.

You also misspelled slideToggle.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example</title>

    <!-- javascript/jQuery -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


</head>
<style>

    .panel, .flip {
        padding: 0px;
        text-align: center;
        background-color: #C0C0C0;
        border: solid 3px #C0C0C0;
        border-radius: 25px;
        width: 800px;

    }

    .panel {
        padding: 6px;
        display: none;
    }

</style>
<body>

<center>
    <div class="flip"><h3>title</h3>

        <div class="panel">
            etc etc etc...some text here
        </div>
    </div>
</center>
<br>
<center>
    <div class="flip"><h3>title</h3>

        <div class="panel">
            etc etc etc
        </div>
    </div>
</center>

<script>
    $(document).ready(function () {
        $(".flip").on('click', function () {
            $(this).children(".panel").slideToggle("slow");
        });
    });
</script>
</body>
</html>

Upvotes: 1

Banjo Drill
Banjo Drill

Reputation: 121

Change flip and panel to classes rather than id's. Classes are for applying shared properties to multiple elements. Id's are for singular elements.

If multiple elements have the same Id, jQuery will only honor the first one.

Upvotes: 0

Related Questions