开发者

jquery show/hide function

i've used the JQuery function show_hide to hide a box and then display it when the link is clicked. This all works fine. If i wanted to hide a second box's i would simply re-write the function开发者_运维知识库 and rename the class and function (simplest way of doing it), However say i have a table, and the content of the table loops therefore the class will always be the same. How would i then display each show_hide entry individually i.e so if i clicked the show_hide link it would display just the content for that 1 entry and not all of them on that page.

This is the basic code that hides the slidingDiv. If you were to duplicate it and click on the link you would see that all of them would open. I need a way of just opening the one i want when the class is the same. Any help would be appreciated.

 $(document).ready(function(){
    $("slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').click(function(){
    $("slidingDiv").slideToggle();
}); 
}):

.slidingDiv{
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}

<a href="#" class="show_hide">Show/hide</a>

<div class="SlidingDiv">
    <p>blah blah blah</p>
</div>


You could use next() like this:

$('.show_hide').click(function(e){
      e.preventDefault();
      $(this).next(".SlidingDiv").slideToggle();
}); 

example: http://jsfiddle.net/niklasvh/sx5TM/


simple you have write a generic function using $(this)

   $(this).hide();
    $(this).show();
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜