Exapand glyphicon-plus glyphicon-plus when collapsed on button click

Benjoe 411 Reputation points

I have a page with bootstrap glyphicon-plus glyphicon-minus in a span with a class. when the page loads the span is collapsed by default and I need to Expand it on a button click programmatically.

I am doing
 $("#btn-search").click(function () {


JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
592 questions
A Microsoft web application framework that implements the model-view-controller (MVC) design pattern.
856 questions
{count} votes

Accepted answer
  1. Lan Huang-MSFT 15,221 Reputation points Microsoft Vendor

    Hi @Benjoe,

    You'd better provide your complete code or the problem you are currently facing.

    I wrote a demo according to your needs, you can refer to it.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
            #toggle-view .panel {
                margin: 5px 0;
                display: none;
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
            $(document).ready(function () {
                $('#toggle-view li').click(function () {
                    var text = $(this).find('div.panel');
                    if (text.is(':hidden')) {
                        $(this).find('span').removeClass("glyphicon glyphicon-plus glyph-plus-toggle").addClass("glyphicon glyphicon-minus glyph-minus-toggle");
                    } else {
                        $(this).find('span').removeClass("glyphicon glyphicon-minus glyph-minus-toggle").addClass("glyphicon glyphicon-plus glyph-plus-toggle");
        <form id="form1" runat="server">
            <h2 class="h2-finder">Used cars</h2>
            <ul id="toggle-view">
                <li class="li-toggle">
                    <h3 class="toggle-h3">Title 1<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h3>
                    <div class="panel">


    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

1 additional answer

Sort by: Most helpful
  1. Benjoe 411 Reputation points

    Hi @Lan Huang

    I can only hide the other parents with jquery which works. All that I need is to include the children also

    0 comments No comments