CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapbootstrap-4
itjuba
itjuba

Reputation: 528

How to hide the divs after the second click and page refresh

I using bootstrap 4 js collapse, its all work fine, the problem is when I click to show the hidden div and after page reload, when I click again it shows the hidden div where it supposed to hide it, any tips for this situation?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<li class="nav-item">
    <a class="nav-link dropdown-btn" data-toggle="collapse" data-target="#cl" href="#">
        <i class="material-icons" style="color : black;">content_paste</i>
        <p>Client Section <span class="iconify" data-icon="zmdi-caret-down-circle" data-inline="false"></span></p>
    </a>
</li>
<div id="cl">
    <li class="nav-item">
        <a class="nav-link" href="{% url 'client'%}">
            <i class="material-icons" style="color : white;">content_paste</i>

            <p>Client List</p>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{% url 'contact'%}">
            <i class="material-icons" style="color : white;">content_paste</i>

            <p>Client Contact List</p>
        </a>
    </li>
</div>
<li class="nav-item">
    <a class="nav-link" data-toggle="collapse" data-target="#fournis" href="#">
        <i class="material-icons" style="color : black">content_paste</i>

        <p>Fournis Section <span class="iconify" data-icon="zmdi-caret-down-circle" data-inline="false"></span></p>
    </a>
</li>
<div id="fournis">
    <li class="nav-item">
        <a class="nav-link" href="{% url 'fournis'%}">
            <i class="material-icons" style="color : white;">content_paste</i>
            <p>Fournis List</p>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{% url 'Fournis_contact'%}">
            <i class="material-icons" style="color : white;">content_paste</i>
            <p>Fournis Contact List</p>
        </a>
    </li>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Upvotes: 0

Views: 39

Answers (1)

Nisharg Shah
Nisharg Shah

Reputation: 19542

Use the show class, in collapsable div 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<li class="nav-item">
    <a class="nav-link dropdown-btn" data-toggle="collapse" data-target="#cl" href="#">
        <i class="material-icons" style="color : black;">content_paste</i>
        <p>Client Section <span class="iconify" data-icon="zmdi-caret-down-circle" data-inline="false"></span></p>
    </a>
</li>
<div id="cl" class="show">
    <li class="nav-item">
        <a class="nav-link" href="{% url 'client'%}">
            <i class="material-icons" style="color : white;">content_paste</i>

            <p>Client List</p>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{% url 'contact'%}">
            <i class="material-icons" style="color : white;">content_paste</i>

            <p>Client Contact List</p>
        </a>
    </li>
</div>
<li class="nav-item">
    <a class="nav-link" data-toggle="collapse" data-target="#fournis" href="#">
        <i class="material-icons" style="color : black">content_paste</i>

        <p>Fournis Section <span class="iconify" data-icon="zmdi-caret-down-circle" data-inline="false"></span></p>
    </a>
</li>
<div id="fournis" class="show">
    <li class="nav-item">
        <a class="nav-link" href="{% url 'fournis'%}">
            <i class="material-icons" style="color : white;">content_paste</i>
            <p>Fournis List</p>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{% url 'Fournis_contact'%}">
            <i class="material-icons" style="color : white;">content_paste</i>
            <p>Fournis Contact List</p>
        </a>
    </li>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Upvotes: 2

Related Questions