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

Benjoe 431

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 () {

$('myclass').find('span').closest('.glyphicon-plus').removeClass();
});

Benjoe 431

Hi Lan,

Thanks for your help in advance. It will be difficult to implement it the way you are suggestion so I have change the requirement and below find my new requirement.

I opened a partial question which was answered correctly at the link below hoping to use the answer to help me continue to resolve my issue but I was wrong. Show an h5 tag that matches a data-id using jQuery My issue is when a parent is toggled, all the children also gets toggle and that is working correctly. I also need to drill down to each Child in that parent and match it to a corresponding selected option with the span text. I want to color the matched child with red. For example inside parent 399 check if child 1 span text matches the selected option Search1, Child 2 span text matches Search2 selected option.

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

  const parentId = $('#ddlSearch option:selected').val();

   var Child1 = $('#Search1 option:selected').text();

   var Child2 = $('#Search2 option:selected').text(); 

  $('[data-id]').each(function () {

    $(this).toggle($(this).is(`[data-id="${parentId}"]`));

      $('.list-container').each(function () {

        var m = $(this).closest('h5.list').find('span').text();

        if ($(m[0]).text() === Child1) {               

                $(this).css('border', 'solid 2px red'); 

            }

            if ($(m[0]).text() === Child2) {                

                $(this).css('border', 'solid 2px red'); 

            }

            

     });

       

     

  });

});


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Global-container">
        <h5 class="to-list Pointer" data-id="399">
            <span>Parent 1</span>
        </h5>
        <div class="list-container" id="399">
            <h4>Child1</h4>
            <h5 class="list">
                <span>Test</span>
            </h5>
            <div class="list">
                <h4>Child 2</h4>
                <h5 class="list-cutom">
                    <span>Test-Child2</span>
                </h5>
            </div>
            <div class="list-container">
                <table class="table table-striped" style="width: 100%; table-layout: fixed;">
                    <thead>
                    <tr>
                        <th>Order Number</th>
                        <th>Status1</th>
                        <th>Status2</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                    <td>
                        <span>52400</span>

                    </td>
                    <td style="width: 90px;">
                        <div> <b class="danger">Rejected</b> </div>
                    </td>
                    <td style="width: 90px;">
                        <div> <b class="success">Approved</b> </div>
                    </td>
                    </tbody>
                </table>
            </div>
        </div>
        <h5 class="to-list Pointer" data-id="392">
            <span>Parent 2</span>
        </h5>
        <div class="list-container" id="392">
            <h4>Child1</h4>
            <h5 class="list">
                <span>Test2</span>
            </h5>
            <div class="list">
                <h4>Child 2</h4>
                <h5 class="list-cutom">
                    <span>Test-Child2</span>
                </h5>
            </div>
            <div class="list-container">
                <table class="table table-striped" style="width: 100%; table-layout: fixed;">
                    <thead>
                    <tr>
                        <th>Order Number</th>
                        <th>Status1</th>
                        <th>Status2</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                    <td>
                        <span>52400</span>

                    </td>
                    <td>
                        <div> <b class="danger">Rejected</b> </div>
                    </td>
                    <td>
                        <div> <b class="success">Approved</b> </div>
                    </td>
                    </tbody>
                </table>
            </div>
        </div>
        <h5 class="to-list Pointer" data-id="492">
            <span>Parent 3</span>
        </h5>
        <div class="list-container" id="492">
            <h4>Child1</h4>
            <h5 class="list-cutom">
                <span>Test2</span>
            </h5>
            <div class="list">
                <h4>Child 2</h4>
                <h5 class="list-cutom">
                    <span>Test-Child2</span>
                </h5>
            </div>
            <div class="list-container">
                <table class="table table-striped" style="width: 100%; table-layout: fixed;">
                    <thead>
                    <tr>
                        <th>Order Number</th>
                        <th>Status1</th>
                        <th>Status2</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                    <td>
                        <span>52400</span>
                    </td>
                    <td style="width: 90px;">
                        <div> <b class="danger">Rejected</b> </div>
                    </td>
                    <td style="width: 90px;">
                        <div> <b class="success">Approved</b> </div>
                    </td>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <select id="ddlSearch">
        <option value="399">399</option>
        <option value="392">392</option>
        <option value="492">492</option>
    </select>

    <select id="Search1">
        <option value="289">Testing</option>
        <option value="358">Orders</option>
        <option value="235">New Test</option>
    </select>
    <select id="Search2">
        <option value="189">Testing2</option>
        <option value="658">Orders3</option>
        <option value="735">New Test56</option>
    </select>

Accepted answer

Lan Huang-MSFT 29,246 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">
    <title></title>
    <style>
        #toggle-view .panel {
            margin: 5px 0;
            display: none;
        }
    </style>

    <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>
    <script>
        $(document).ready(function () {

            $('#toggle-view li').click(function () {

                var text = $(this).find('div.panel');

                if (text.is(':hidden')) {
                    text.slideDown('200');
                    $(this).find('span').removeClass("glyphicon glyphicon-plus glyph-plus-toggle").addClass("glyphicon glyphicon-minus glyph-minus-toggle");
                } else {
                    text.slideUp('200');
                    $(this).find('span').removeClass("glyphicon glyphicon-minus glyph-minus-toggle").addClass("glyphicon glyphicon-plus glyph-plus-toggle");
                }

            });

        });
    </script>
</head>
<body>

    <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">
                    <span>qwertyuiopasdfghjklzxcvbnm</span>
                </div>
            </li>
        </ul>
    </form>
</body>
</html>

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.

Benjoe 431 Reputation points

2023-03-27T21:33:36.98+00:00

Hi Lan,

Thanks again for responding to my new post.

My data structure is a sort of a hierarcy . I am using the bootstrap glyphicon-plus glyphicon-minus to create the hierarcy . There are so many a parents and inside each of them are also children which are collapsed. I have three dropdowns, one represent the Parent, first child and second child and the last child have a table. I am using jquery to select one parent at a time When a parent is selected from dropdown, I matched it against the data in hierarcy to see if they match. If all the three dropdowns matches, the parent, child and child2 show that parent and it hierarcy while expand with the children that matches those in the dropdown inside them and hide others. So far I can toggle and get one parent but needs to get the children inside also inside the visible parent while expanding the parent and children.

https://jsfiddle.net/denkyira/yg1ksta2/57/
Lan Huang-MSFT 29,246 Reputation points Microsoft Vendor

2023-03-28T09:24:57.8266667+00:00

Hi @Benjoe,

I tested your code, and looked at your requirements, but they seem to be in conflict. Your requirement is that you want to use bootstrap glyphicon-plus glyphicon-minus, but in your code you achieve this requirement by jQuery toggle() method.

In your code, you want to hide and show <span> via jQuery toggle() method. According to your entire html, this should not work, because it will only hide the text of the specified <span>, and will not hide the style and so on. I think first you should be clear about the method you need to use, and your html page should be simplified, such as putting the text in a <span>, which can better match the selected text.

Lan Huang-MSFT 29,246 Microsoft Vendor

Hi @Benjoe,

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

I don't think you can simply implement it through <span>, you need to implement it through <div>, because what you need to hide is a whole, not text. I made some adjustments to your html, you can refer to the code below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <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>
    <script>
        $(document).ready(function () {
            $("#btn-search").click(function () {
                var parentId = $('#parents option:selected').text();
                var child1 = $('#child1 option:selected').text();
                var child2 = $('#child2 option:selected').text();
                $('[data-id]').each(function () {
                    $(this).toggle($(this).is(`[data-id="${parentId}"]`));
                });               
                $("#list div").each(function () {
                    if ($(this).is(`[id="${child1}"]`)) {
                        $(this).toggle($(this).is(`[id="${child1}"]`))
                    }
                    else  {
                        $(this).toggle($(this).is(`[id="${child2}"]`))
                    }
                });
            });
        })

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="list">
            <h5 class="list Pointer bg-primary well-sm" data-id="399">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                <span>Parent 1</span>
                <span>— </span>
                <span>More Test</span>

            </h5>
            <div class="container" id="Test_email/Test_email">
                <h5 class="list Pointer bg-info">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    <span>Test_email</span>
                    <span>/</span>
                    <span>Test_email</span>

                </h5>
            </div>
            <div class="container" id="Test/Test_email">
                <h4>Sub Order</h4>
                <h5 class="list Pointer bg-info">

                    <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                    <span>Test/Test_email</span>
                </h5>

                <table class="table table-striped" style="width: 100%; table-layout: fixed;">
                    <thead>
                        <tr>
                            <th>Number</th>
                            <th>Comments</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="width: 90px;">
                                <b class="success">Approved</b>
                            </td>
                            <td style="width: 90px;">
                                <b class="danger">Rejected</b>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5 class="list Pointer bg-primary well-sm" data-id="392">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                <span>Parent 2</span>
                <span>— </span>
                <span>More Test2</span>

            </h5>
            <div class="container" id="Test_email2/Test_email2">
                <h5 class="list Pointer bg-info">

                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    <span>Test_email2</span>
                    <span>/</span>
                    <span>Test_email2</span>

                </h5>
            </div>
            <div class="container" id="Test2/Test_email2">
                <h4>Sub Order2</h4>
                <h5 class="list Pointer bg-info">

                    <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                    <span>Test2/Test_email2</span>
                </h5>


                <table class="table table-striped" style="width: 100%; table-layout: fixed;">
                    <thead>
                        <tr>
                            <th>Number</th>
                            <th>Comments</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="width: 90px;">
                                <b class="success">Approved</b>
                            </td>
                            <td style="width: 90px;">
                                <b class="danger">Rejected</b>
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>
            <h5 class="list Pointer bg-primary well-sm" data-id="402">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                <span>Parent 3</span>
                <span>— </span>
                <span>More Test3</span>

            </h5>
            <div class="container" id="Test_email3/Test_email3">
                <h5 class="list Pointer bg-info">

                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    <span>Test_email3</span>
                    <span>/</span>
                    <span>Test_email3</span>

                </h5>
            </div>
            <div class="container" id="Test3/Test_email3">
                <h4>Sub Order3</h4>
                <h5 class="list Pointer bg-info">

                    <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                    <span>Test3/Test_email3</span>
                </h5>


                <table class="table table-striped" style="width: 100%; table-layout: fixed;">
                    <thead>
                        <tr>
                            <th>Number</th>
                            <th>Comments</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="width: 90px;">
                                <b class="success">Approved</b>
                            </td>
                            <td style="width: 90px;">
                                <b class="danger">Rejected</b>
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>

        <select id="parents">
            <option value="">Select Parent</option>
            <option value="399">399</option>
            <option value="392">392</option>
            <option value="402">402</option>
        </select>
        <select id="child1">
            <option value="">Select Child1</option>
            <option value="">Test_email/Test_email</option>
            <option value="">Test_email2/Test_email2</option>
            <option value="">Test_email3/Test_email3</option>
        </select>
        <select id="child2">
            <option value="">Select Child2</option>
            <option value="">Test/Test_email</option>
            <option value="">Test2/Test_email2</option>
            <option value="">Test3/Test_email3</option>
        </select>
        <button id="btn-search" type="button">
            Search
        </button>
    </form>
</body>
</html>

Benjoe 431 Reputation points

2023-03-31T00:57:06.2733333+00:00

Hi @Lan Huang

Thanks your solution works after I added DIVS. Thanks once more for your help again.

1 additional answer

Benjoe 431 Reputation points

2023-03-31T00:58:41.9333333+00:00

Hi @Lan Huang

I can only hide the other parents with jquery which works. All that I need is to include the children also
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

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

1 additional answer

Your answer