locked
Nested glyphicon glyphicon-plus bootstrap 3.7 RRS feed

  • Question

  • User457850011 posted

    I have a span with glyphicon glyphicon-plus which works when the page loads. It contains a child and the child has children.  I need the child also to use the glyphicon glyphicon-plus and only expand by the user. Currently only glyphicon glyphicon-minus work by default for the child

    Parent

    <span class="glyphicon glyphicon-plus" style="font-family: Verdana, Helvetica, sans-serif; font-size: 10pt;" aria-hidden="true"></span>
            <span>@item.employee</span>

    child

     <span class="glyphicon glyphicon-minus"   style="font-family: Verdana, Helvetica, sans-serif; font-size: 10pt;"  aria-hidden="true" ></span>
            <span>@item.Number &#47; @item.Name</span>

    Thursday, March 18, 2021 4:43 PM

Answers

  • User1686398519 posted

    Hi denkyira, 

    According to your needs, I wrote an example, you can refer to it.

    • You can change the class of the span through jquery to modify the icon.
    <style>
            .list-group.list-group-root {
                padding: 0;
                overflow: hidden;
            }
            .list-group.list-group-root .list-group {
                margin-bottom: 0;
            }
    
            .list-group.list-group-root .list-group-item {
                border-radius: 0;
                border-width: 1px 0 0 0;
            }
    
            .list-group.list-group-root > .list-group-item:first-child {
                border-top-width: 0;
            }
    
            .list-group.list-group-root > .list-group > .list-group-item {
                padding-left: 30px;
            }
    
            .list-group.list-group-root > .list-group > .list-group > .list-group-item {
                padding-left: 45px;
            }
    
            .list-group-item .glyphicon {
                margin-right: 5px;
            }
    </style>
    <div class="list-group list-group-root well">
        @for (int i = 1; i < 10; i++)
        {
            <a href="#item-@(i)" class="list-group-item" data-toggle="collapse">
                <span class="glyphicon glyphicon-plus" style="font-family: Verdana, Helvetica, sans-serif; font-size: 10pt;" aria-hidden="true"></span>Item @(i)
            </a>
            <div class="list-group collapse" id="item-@(i)">
                @for (int j = 1; j < 4; j++)
                {
                    <a href="#item-@(i)-@(j)" class="list-group-item" data-toggle="collapse">
                        <span class="glyphicon glyphicon-plus" style="font-family: Verdana, Helvetica, sans-serif; font-size: 10pt;" aria-hidden="true"></span>Item @(i)-@(j)
                    </a>
                    <div class="list-group collapse" id="item-@(i)-@(j)">
                        @for (int m = 1; m < 3; m++)
                        {
                            <a href="#" class="list-group-item">Item @(i)-@(j)-@(m)</a>
                        }
                    </div>
                }
            </div>
        }
    </div>
    @section scripts{
        <script>
            $(document).ready(function () {
                $('.list-group-item').on('click', function () {
                    $('.glyphicon', this)
                        .toggleClass('glyphicon glyphicon-minus')
                        .toggleClass('glyphicon glyphicon-plus');
                });
            });
        </script>
    }

    Here is the result. 

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 19, 2021 10:16 AM

All replies

  • User1686398519 posted

    Hi denkyira, 

    According to your needs, I wrote an example, you can refer to it.

    • You can change the class of the span through jquery to modify the icon.
    <style>
            .list-group.list-group-root {
                padding: 0;
                overflow: hidden;
            }
            .list-group.list-group-root .list-group {
                margin-bottom: 0;
            }
    
            .list-group.list-group-root .list-group-item {
                border-radius: 0;
                border-width: 1px 0 0 0;
            }
    
            .list-group.list-group-root > .list-group-item:first-child {
                border-top-width: 0;
            }
    
            .list-group.list-group-root > .list-group > .list-group-item {
                padding-left: 30px;
            }
    
            .list-group.list-group-root > .list-group > .list-group > .list-group-item {
                padding-left: 45px;
            }
    
            .list-group-item .glyphicon {
                margin-right: 5px;
            }
    </style>
    <div class="list-group list-group-root well">
        @for (int i = 1; i < 10; i++)
        {
            <a href="#item-@(i)" class="list-group-item" data-toggle="collapse">
                <span class="glyphicon glyphicon-plus" style="font-family: Verdana, Helvetica, sans-serif; font-size: 10pt;" aria-hidden="true"></span>Item @(i)
            </a>
            <div class="list-group collapse" id="item-@(i)">
                @for (int j = 1; j < 4; j++)
                {
                    <a href="#item-@(i)-@(j)" class="list-group-item" data-toggle="collapse">
                        <span class="glyphicon glyphicon-plus" style="font-family: Verdana, Helvetica, sans-serif; font-size: 10pt;" aria-hidden="true"></span>Item @(i)-@(j)
                    </a>
                    <div class="list-group collapse" id="item-@(i)-@(j)">
                        @for (int m = 1; m < 3; m++)
                        {
                            <a href="#" class="list-group-item">Item @(i)-@(j)-@(m)</a>
                        }
                    </div>
                }
            </div>
        }
    </div>
    @section scripts{
        <script>
            $(document).ready(function () {
                $('.list-group-item').on('click', function () {
                    $('.glyphicon', this)
                        .toggleClass('glyphicon glyphicon-minus')
                        .toggleClass('glyphicon glyphicon-plus');
                });
            });
        </script>
    }

    Here is the result. 

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 19, 2021 10:16 AM
  • User457850011 posted

    Hi

    Thank you so much. This is exactly what I was looking for

    Friday, March 19, 2021 1:21 PM