Using local storage or session storage keep collapse item-1 class show/not show

Question

I have issue with keeping my callapse item after refresh open or closed. I using bootstrap 5. To see accordion item see, need add show in the class

<div role="tabpanel" data-bs-parent="#accordion-1" class="accordion-collapse collapse show item-1" id="1">

My html code:

<div id="row" class="row gaps">
    <div id="col-3" class="col-lg-3">
        <div role="tablist" class="accordion" id="accordion-1">
            <div class="accordion-item visible">
                <h2 role="tab" class="accordion-header mb-0"><button data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-1" aria-expanded="true" aria-controls="accordion-1 .item-1" class="accordion-button" style="font-family: Alata, sans-serif;">1th</button></h2>
                <div role="tabpanel" data-bs-parent="#accordion-1" class="accordion-collapse collapse show item-1" id="1">
                    <div class="accordion-body"><span style="font-family: Alata, sans-serif;font-size: 22px;"> random text</span></div>
                </div>
            </div>
        </div>
        <div role="tablist" class="accordion" id="accordion-4">
            <div class="accordion-item visible">
                <h2 role="tab" class="accordion-header mb-0"><button data-bs-toggle="collapse" data-bs-target="#accordion-4 .item-1" aria-expanded="true" aria-controls="accordion-4 .item-1" class="accordion-button" style="font-family: Alata, sans-serif;">  2th</button></h2>
                <div role="tabpanel" data-bs-parent="#accordion-4" class="accordion-collapse collapse show item-1 show" id="2">
                    <div class="accordion-body"><span style="font-family: Alata, sans-serif;font-size: 22px;"> random text 2</span>
                        <div class="d-grid gap-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="col-3" class="col-lg-3">
        <div role="tablist" class="accordion" id="accordion-2">
            <div class="accordion-item visible">
                <h2 role="tab" class="accordion-header mb-0"><button data-bs-toggle="collapse" data-bs-target="#accordion-2 .item-1" aria-expanded="true" aria-controls="accordion-2 .item-1" class="accordion-button" style="font-family: Alata, sans-serif;">3 th</button></h2>
                <div role="tabpanel" data-bs-parent="#accordion-2" class="accordion-collapse collapse show item-1" id="3">
                    <div class="accordion-body"><span style="font-family: Alata, sans-serif;font-size: 22px;"> random text 3</span>
                        <div class="d-grid gap-2"></div>
                    </div>
                </div>
            </div>
        </div>
        <div role="tablist" class="accordion" id="accordion-3">
            <div class="accordion-item visible">
                <h2 role="tab" class="accordion-header mb-0"><button data-bs-toggle="collapse" data-bs-target="#accordion-3 .item-1" aria-expanded="true" aria-controls="accordion-3 .item-1" class="accordion-button" style="font-family: Alata, sans-serif;"> 4th</button></h2>
                <div role="tabpanel" data-bs-parent="#accordion-3" class="accordion-collapse collapse show item-1" id="4">
                    <div class="accordion-body"><span style="font-family: Alata, sans-serif;font-size: 22px;"> random text 4</span>
                        <div class="d-grid gap-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Then I press on 4th button for example i can hide it. Visually looks like this.

So I want too keep it after refreshing the page.

I try to

<script>
    // Open/close the collapse panels based on history
    var storage  = $.localStorage;

    $('.collapse').on('hidden.bs.collapse', function () {
        storage.remove('open_' + this.id);
    });

    $('.collapse').on('shown.bs.collapse', function () {
        storage.set('open_' + this.id, true);
    });

    $('.collapse').each(function () {
        // Default close unless saved as open
        if (storage.get('open_' + this.id) == true) {
            $(this).collapse('show');
        }
    });
</script>

But what not working for me.

Please, can you give some tips how to solve my problem?

score 1 · Accepted Answer · answered Oct 20 '21 at 13:20

1

localStorage is not defined inside jQuery but inside Window so you should access it as window.localStorage or just localStorage but not as $.localStorage

answered Oct 20 '21 at 13:20

Reflective

3,854
1
13
25

if page will be use on mobile browser, it will work? If not maybe better use session storage? – mausasu1234 Oct 20 '21 at 13:21
`localStorage` is not dependent on the device - mobile or not – Reflective Oct 20 '21 at 13:33
With what, still not saving, maybe problem is with corrects div's? – mausasu1234 Oct 20 '21 at 15:02
You probably have more incorrect spots in your code ... generally local storage doesn't have methods named `get`, `set` and `remove` but `getItem` and `setItem` and `removeItem`. You don't have provided a copy of your code which might be fixed i.e. these events you have handlers for are never fired and e.t.c. The way you provide your case for resolving is the main reason of no interest of helping. Your case is not difficult, but you gave a partial code and no one can give you a great help based on that. – Reflective Oct 20 '21 at 16:01
1

thanks for tips, its working now. – mausasu1234 Oct 22 '21 at 12:16

Using local storage or session storage keep collapse item-1 class show/not show

1 Answers1