having difficulties on understanding java script toggle class : i want to change glyphicon-plus into glyphicon-minus when clicked on it. here is my code
<pre><code>` <?php foreach (get_categories() as $category){ ?>
        <div class = "sidebar_menu" >
            <li class="<?php echo $active = ($i==1)?"active":""; ?>"><a href="<?php echo get_category_link(get_cat_ID( $category->name )); ?>" ><strong><?php echo $category->name;?> </strong></a></li>
            <div class = "floatright">
                <li  id="cool">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?php echo $i; ?>" aria-expanded="true" aria-controls="collapseOne<?php echo $i; ?>">
                        <i class="glyphicon glyphicon-plus"  aria-hidden="true"></i>
                    </a>
                </li>
            </div>
        </div>`

and the js.

<pre><code>`$('#cool').click(function(){
    $(this).find('i').toggleClass('glyphicon-plus').toggleClass('glyphicon-minus');
});`

problem is that the glyphicon changes for the first list item only. it should be changed for all list item. Any help will be highly appreciated.

