How to run Jscript without postback

Question

I'm trying to build an "accordion" style collapsible div into my web page as described here on w3c schools... accordion description

I've got most of it working - my code is this:

ASP:

<div class="col-md-4">
        <button class="accordion">Section 1</button>
        <div class="content">
            <asp:Table ID="Consumable_table" runat="server">
                <asp:TableHeaderRow>
                    <asp:TableHeaderCell>
                    <h2>
                        <u>Consumable Stock</u>
                    </h2>
                    </asp:TableHeaderCell>
                </asp:TableHeaderRow>
            </asp:Table>
        </div>
    </div>

CSS:

.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;}

.active, .accordion:hover {
background-color: #ccc;}

.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;}

And I've added the following Jscript:

$(document).ready(function () {
        var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function () {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.maxHeight) {
                    panel.style.maxHeight = null;
                } else {
                    panel.style.maxHeight = panel.scrollHeight + "px";
                }

                return false;
            });
        }
    });

The code seems to work fine and when I click the Accordion element it expands - But it then seems to post back and the accordion collapses again and doesn't display.

My question is how can I have it expand and stay expanded as described in the tutorial. I've seen a number of answers here and on various sites that suggests "return false" might be enough.

Does this have anything to do with the ASP table inside the div?

Answer 1

The dafault behaviour of the HTML button is to submit the form when clicked (its type is submit by default). All you need to do is to add type="button" attribute to the element, like this:

<button class="accordion" type="button">Section 1</button>

That should resolve the problem - it indicates that the button is just a simple clickable button, without any special action.

This answer also covers it: <button> vs. <input type="button" />. Which to use?

Answer 2

There are two ways,

1. By default the button behavior like submit button so postback will happen. If you want to prevent postback you can use below code.

   <button class="accordion" onclick="return false;">Section 1</button>

2. You can use type attribute to prevent submit behavior.

   <button type="button" class="accordion">Section 1</button>