Question

I’m using this to expand hidden list items. I expand them via an anchor link (.edit_this). How can I hide the other list items while expanding/showing only one list item?

$(document).ready(function(){
$('.show_hide').slideUp(0);
$('.edit_this').click(function(){
var takeID = $(this).attr('id');
$('#'+takeID+'C').slideDown(300);
});$('.close').click(function(){
var takeID = $(this).attr('id').replace('Close','');
$('#'+takeID+'C').slideUp(300);
});
});

—

<li><a href="javascript:void(0);" class="edit_button edit_this" id="1">Edit</a></li>
<li class="show_hide" id="1C">
<p>lkjlkjasdfasdf</p>
<a href="javascript:void(0);"  id="1Close" class="close cancel_btn">Close</a>
</li>

<li><a href="javascript:void(0);" class="edit_button edit_this" id="2">Edit</a></li>
<li class="show_hide" id="2C">
<p>lkjlkjasdfasdf</p>
<a href="javascript:void(0);"  id="2Close" class="close cancel_btn">Close</a>
</li>

<li><a href="javascript:void(0);" class="edit_button edit_this" id="3">Edit</a></li>
<li class="show_hide" id="3C">
<p>lkjlkjasdfasdf</p>
<a href="javascript:void(0);"  id="3Close" class="close cancel_btn">Close</a>
</li>

​

Answer 1

Just adding a simple $('.show_hide').slideUp(300); to your click event should do it:

$(document).ready(function() {
    $('.show_hide').slideUp(0);
    $('.edit_this').click(function() {
        $('.show_hide').slideUp(300); // this line
        var takeID = $(this).attr('id');
        $('#' + takeID + 'C').slideDown(300);
    });
    $('.close').click(function() {
        var takeID = $(this).attr('id').replace('Close', '');
        $('#' + takeID + 'C').slideUp(300);
    });
});

DEMO