Try to apply css/style for parent tag on jquery toggle()

I am trying to toggle the parent <li> and <button> styles.

Here my code

<script type="text/javascript">
    $(document).ready(function(){
        $(".btn-comments").click(function(){
            $(this).css("border","none");
            $(this).parent().addClass("selected");
            $(".deal-comment-box").slideToggle(function() {

            });
        });
    });
</script>
<div class="comment-tools">
<ul>
    <li>views:<span class="count">10,500</span></li>
    <li><button type="button" class="btn-share">Share</button><开发者_StackOverflow社区;/li>
    <li><button type="button"  class="btn-flag">Flag</button></li>
    <li><button type="button" class="btn-comments">Comments</button></li>
    <li><button type="button" class="btn-edit">edit</button></li>
    <li><button type="button" class="btn-edit">remove</button></li>
</ul>
</div>
<div class="comment-box">
    <h3>All Comments (12)</h3>
</div>
 <div class="comment-tools">
<ul>
    <li>views:<span class="count">10,500</span></li>
    <li><button type="button" class="btn-share">Share</button></li>
    <li><button type="button"  class="btn-flag">Flag</button></li>
    <li><button type="button" class="btn-comments">Comments</button></li>
    <li><button type="button" class="btn-edit">edit</button></li>
    <li><button type="button" class="btn-edit">remove</button></li>
</ul>
</div>
<div class="comment-box">
    <h3>All Comments (12)</h3>
</div>

The above section will repeat for n times. clicking on comments button in <li> below comment box <div> will expand and i am trying remove the button border and giving some background for <li> in toggle mode.

Note: I need to toggle the button border and parent "selected" class too.

Could you please any say what mistake i did.

I don't see a .deal-comment-box in your markup or a .selected class, but you didn't include the css, so I assume that's there somewhere.

EDIT:

Check out the working jsFiddle demo that utilizes:

<script type="text/javascript">
    $(document).ready(function(){

        $(".btn-comments").click(function(){

            $(this)
                .toggleClass("button-clicked")   
                .parent().toggleClass("selected")
                .parent().next().toggle();

        });

    });
</script>

Someone may be able to optimize this but, at least it works for what your markup is.

If border and selected class need to toggle then you should hook a toggle() event handler on the button instead of click():

$(document).ready(function(){
    $(".btn-comments").toggle(function(){
        $(this).css("border","none");
        $(this).parent().addClass("selected");
        $(".deal-comment-box").slideToggle();
    },
    function(){
        $(this).css("border","<set-it-back-to-original>");
        $(this).parent().removeClass("selected");
        $(".deal-comment-box").slideToggle();
    });
});