CODEWITHSUNDEEP
jquery
Adnan
Adnan

Reputation: 26350

jQuery Toggle show/hide on the span action

I have the following list:

    <div id="topicListContainter">
            <ul id="sList" class="sList">
                    <li id="itemList_11">
                        0. updated  <span class="closeBox" id="11" ><img  src="images/close.png"></span>                                   
                        <div id="comment_actions" class="comment_actions" style="display: none; margin: 5px"><textarea style="width: 100%"></textarea>
                            <br>
                            <input type="text" id="date" class="date" /> <input style="margin: 5px" type="button" class="button blue" value="Save" />
                        </div>
                    </li>
                    <li id="itemList_27">
                        1. Sta ima  <span class="closeBox" id="27" ><img  src="images/close.png"></span>                                   
                        <div id="comment_actions" class="comment_actions" style="display: none; margin: 5px"><textarea style="width: 100%"></textarea>
                            <br>
                            <input type="text" id="date" class="date" /> <input style="margin: 5px" type="button" class="button blue" value="Save" />
                        </div>
                    </li>
                    <li id="itemList_26">
                        2. Update 22  <span class="closeBox" id="26" ><img  src="images/close.png"></span>                                   
                        <div id="comment_actions" class="comment_actions" style="display: none; margin: 5px"><textarea style="width: 100%"></textarea>
                            <br>
                            <input type="text" id="date" class="date" /> <input style="margin: 5px" type="button" class="button blue" value="Save" />
                        </div>
                    </li>
                        .....

How can I toggle and show/hide the <div> comment_actions on the click of the action of closeBox

Note: each <li> has its own comment_actions div

So far I have tried something like:

jQuery('.closeBox').live('click', function() {   
        jQuery(this).next('div').hide();
});

Upvotes: 0

Views: 1697

Answers (3)

Jason Towne
Jason Towne

Reputation: 8050

First, the fiddle.

I would add a data property to your comments div blocks that matches the id of the span being clicked. Then you can select .toggle() method to show hide as many other div blocks as you want with the matching data property using a data selector.

I also removed the display:none; from the closebox span so it could actually be clicked.

0. updated  
<!-- Note the data-comments property added here -->
<span class="closeBox" id="11" data-comments="11" >
    <img  src="images/close.png">
</span>                                   

<!-- Note the data-comments property added here -->
<div id="comment_actions" data-comments="11" class="comment_actions" style="display: none; margin: 5px">
    <textarea style="width: 100%"></textarea>
    <br>
    <input type="text" id="date" class="date" /> 
    <input style="margin: 5px" type="button" class="button blue" value="Save" />
</div>​

$(document).ready(function(e) {
    $('.closeBox').on('click', function(e) {
        e.preventDefault();
        var $target = $(e.target).parent();
        $('div[data-comments="' + $target.data('comments') + '"]').toggle();
    });
});​

Upvotes: 1

Novak
Novak

Reputation: 2768

Your code was close.

Remove the display: none from the span.closedBox and try this:

jQuery('.closeBox').live('click', function() {   
        jQuery(this).next('div.comment_actions').toggle();
});

Also, avoid using the attribute id value in more than one element. (no duplicates of id)

Upvotes: 0

Namat
Namat

Reputation: 71

$('.closeBox').bind('click', function() {
  $('.comment_actions').toggle();
});

If you want a little more functionality check this out:

http://api.jquery.com/toggle/

Upvotes: 0

Related Questions