jQuery, slide toggle only works for 1 section

Question

First post here, go easy on me :)

I'm new to web development and this is my first project. I think i'm ok on the HTML and CSS side of things and I have now started using jQuery. jQuery is what I'm struggling on.

I have this in the head section of my intranet page:

JQUERY

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("fast");
  });
});

and I have this:

HTML

    <div class="announcements">
        <div id="flip">
            <h2 class="announcements">title here</h2>
            <div class="announcesig">
                Informed by: name here<br>Date: date here
            </div>
        </div>
        <div id="panel">
            <p>comment here<br>
            more comment
            <a target="_blank" href="link here">Click Here</a></p>
        </div>
    </div>

This works as intended but if I do it for another <div class="Announcements"> the same format as above it doesn't work for the next but still works for the first.

Question

Do I have to do a script for each announcement e.g. #flip1, #flip2 then do the CSS and HTML for each one? Or is there an easier way?

I'm sorry if this isn't clear enough.

Answer 1

Use a class instead. Like mentioned in your comments, Ids should be unique, classes however can be used multiple times. When you change the id's to classes you can use the following:

$(document).ready(function(){
  $(".panel").hide();
  $(".flip").click(function(){
    $(this).next().slideToggle("fast");
  });
});

Here is a working example:

http://jsfiddle.net/RubenJonker/ygmj3wts/

Answer 2

Use This Code

<div class="announcements">
        <div class="flip">
            <h2 class="announcements">title here</h2>
            <div class="announcesig">
                Informed by: name here<br>Date: date here
            </div>
        </div>
        <div class="panel">
            <p>comment here<br>
            more comment
            <a target="_blank" href="link here">Click Here</a></p>
        </div>
    </div>

• JQuery Function

`

$(document).ready(function(){
  $(".flip").click(function(){
    $(this).siblings(".panel").slideToggle("fast");
  });
});

`

Answer 3

Please try this

<div class="announcements">
        <!--Panel 1-->
        <div class="flip">
            <div>
                <h2 class="announcements">title here</h2>
                <div class="announcesig">
                    Informed by: name here<br>Date: date here
                </div>
            </div>
            <div class="slide" style="display: none">
                <p>comment here<br>
                more comment
                <a target="_blank" href="link here">Click Here</a></p>
            </div>
        </div>

        <!--Panel 2-->
        <div class="flip">
            <div>
                <h2 class="announcements">title here</h2>
                <div class="announcesig">
                    Informed by: name here<br>Date: date here
                </div>
            </div>
            <div class="slide" style="display: none">
                <p>comment here<br>
                more comment
                <a target="_blank" href="link here">Click Here</a></p>
            </div>
        </div>
    </div>

and the jquery is

$(function() {
            $(".flip").click(function(){
                $('.slide').hide();
                $(this).find('.slide').slideToggle("fast");
            });
        })