multiple div using the same class open at once

I am using the javascript function for multiple hide show divs in custom tumblr theme.. my The problem is as the class name is same, if i cl开发者_JAVA百科ick on a single div, by default all the div gets show or hide.

  <script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
   $(".toggleme").click(function () {
    $(".toparea3").slideToggle("slow");
  return false;
   });
    });
</script>

<a class="toggleme" href="#"><img src="http://www.abc.com/images/share.png"></a>

<div class="toparea3" style="display:none;">
    <div class="share-bar clearfix" style=" margin-top:3px;margin-left: -2px;width: 380px;height: 50px;">
        <div class="share-bar-buttons">
            <div class="share-bar-facebook">
                <iframe src="http://www.facebook.com/plugins/like.php?href={URLEncodedPermalink}&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;font=lucida+grande&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>
            </div>
        </div>
        <div style="margin-left:80px;margin-top: 15px;" class="share-bar-twitter">
            <a href="http://twitter.com/share" class="twitter-share-button"
                                      data-url="{Permalink}" 
                                      {block:Twitter}data-via="{TwitterUsername}"{/block:Twitter} 
                                      data-related="stylehatch:Premium Tumblr Themes by @newezra"></a>
        </div>

        <div style="float: right;margin-top:-25px;" class="share-bar-shorturl">
            <div class="linktumb">
                http://www.tumblr.com/xdrs2sf
            </div>
        </div>
    </div>
</div>

---

Assuming you have multiple "toggleme" buttons, if they're all in the format where you have a toggleme button and then a toparea3, you could do something like this:

$('.toggleme').click(function(){
    $(this).next().slideToggle('slow');
    return false;
});

The "next" function gets the next element in the DOM, which is the element you want to expand.

---

Edit: (nevermind the .children)

try using the .closest selector, or the .next selector someone else suggested. Just remember to provide the selector .toparea3 to make sure that only that class opens, not just any closest/next element.

$(document).ready(function() {
    $(".toggleme").click(function () {
        $(this).closest(".toparea3").slideToggle("slow");
        return false;
    });
});

---

I would recommend the following:

Place the 'a' and the corresponding 'div' in a parent 'div'. Something like this:

<div>
    <a class='toggleMe' />
    <div class='toparea3 />
</div>

Then you can update your inner selector to be:

$('.toggleMe').click(function(evt){
    evt.preventDefault();
    var parent = $(this).closest('div');
    $(".toparea3", parent).slideToggle("slow");
}

---

My Recommendation is to give the div an id, and make the anchor element's href point to it:

<script>
$(document).ready(function() {
    $(".toggleme").click(function () {
        $(this.hash).slideToggle("slow");
        return false;
    });
});
</script>

<a class="toggleme" href="#toparea3_1"><img src="http://www.abc.com/images/share.png"></a>

<div id="toparea3_1" class="toparea3" style="display:none;"></div>

This since the hash is given in the form #toparea3_1 that is a valid jQuery selector that selects on ID, and can be used directly.