CODEWITHSUNDEEP
jquerytoggle
Mohamed Amin
Mohamed Amin

Reputation: 1067

jquery prevent other link toggling

i made a simple toggling like that:

<script>
$(document).ready(function(){
    $("#tog1").click(function(){
        $("#rel1").slideToggle();
  })

$("#tog2").click(function(){
        $("#rel2").slideToggle();
  })

......

})
<script>

<ul>
<li><a id="tog1" href="#">اتصل بالعضو</a></li>
<li><a id="tog2" href="#">أعماله السابقه</a></li>
<li><a id="tog3" href="#">مواضيع العضو</a></li>
<li><a id="tog4" href="#">ردود العضو </a></li>
</ul>
</div>

<div id="rel1"></div>
<div id="rel2"></div>
<div id="rel3"></div>
<div id="rel4"></div>

i want to prevent or disable other links toggling when i press one and allow only for one link to be toggled

Upvotes: 0

Views: 77

Answers (1)

Blazemonger
Blazemonger

Reputation: 92893

FIrst, I would add a class and a data- attribute to all those links:

<li><a id="tog1" class="tog" data-rel="rel1" href="#">اتصل بالعضو</a></li>

Now we can make one click handler for them all. Extract the div's ID from this, and close its .siblings() when you open it:

$(".tog").click(function(){
    var $div = $('#'+$(this).data('rel'));
    $div.slideToggle().siblings('div').slideUp();
})

http://jsfiddle.net/mblase75/HVNbB/

Upvotes: 1

Related Questions