Sticky Sidebar. Method updateSticky() does not work when closing the accordion

41 views Asked by At

On the left side of the page I have an accordion with content, on the right side of the page I have a Sticky Sidebar (https://abouolia.github.io/sticky-sidebar/) with accordion content navigation. When clicking on one of the accordion blocks (to expand the block) I use the updateSticky() method so that the sidebar is displayed correctly taking into account the height change, but when closing the same accordion block, the sidebar does not want to update its height borders again and works like this if the accordion block was still open.

index.html (project on Django)

  <div id="main-content" class="main">
    <div class="row">

        <div class="col-lg-9 col-md-12">
            <div class="d-flex flex-column">
                <div class="d-flex flex-column">
                    {% for block in method.text_blocks.all %}
                        <div id="block-{{ forloop.counter }}" class="accordion-card" onclick="this.classList.toggle('open')">
                            <div class="d-flex align-items-center justify-content-between">
                                <h3 class="block-title">{{ block.title }}</h3>
                                <i class="far fa-chevron-down"></i>
                            </div>
                            <div class="block-description">{{ block.description }}</div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="col-3">
            <div id="sidebar" class="sidebar">
                <div class="sidebar__inner">
                    <div class="d-flex flex-column">
                        {% for block in method.text_blocks.all %}
                            <a href="#block-{{ forloop.counter }}">{{ block.title }}</a>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

    </div>
  </div>

index.js

var sidebar = new StickySidebar('#sidebar', {
    containerSelector: '#main-content',
    innerWrapperSelector: '.sidebar__inner',
    topSpacing: 180,
    bottomSpacing: 20
});

$(document).on('click', '.accordion-card', function(event) {
    sidebar.updateSticky();
})
0

There are 0 answers