Tips on concealing the divs following the second click and a page refresh

Bootstrap 4 js collapse is working fine, but I am facing an issue. When I click to show a hidden div and then reload the page, clicking again reveals the previously hidden div when it should be hidden. Any suggestions for addressing this problem?

<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>
           
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9c9d6c9c9dccb97d3caf98897888f9789">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

javascriptjquerycsstwitter-bootstrapbootstrap-4

Answer №1

To create a collapsible section, use the show class in a div element.

<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d0d120d0d180f53170e3d4c534c4b534d">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for creating scrollable boxes with uniform size using tailwindcss:1. Define a specific width and height for

<div className="overflow-x-auto p-5 gap-5"> <div className={` bg-orange-700 w-[300px] h-[300px]`}></div> <div className={` bg-orange-700 w-[300px] h-[300px]`}></div> <div className={` bg-orange-700 ...

cssnext.jstailwind-css

Flipping a combination of CSS 3 and JavaScript cards will cause them to flip all together in unison

Hello! I came across a really cool card flip code that is IE compatible. I made some modifications to it and got it working, but there's one problem - instead of flipping the selected card, it flips all the cards. I tried modifying the JavaScript code ...

javascriptjqueryhtmlcsstransition

Adjust background image size to fit the screen, not just the content

Whenever I set the background image for each page using the following JavaScript code, var imageUrl = 'url(' + imageUrl + ') top left no-repeat fixed'; $('body').css({ 'background': imageUrl }); I also add ...

javascriptjqueryhtmlcssmobile

Show a Toast in React without relying on useEffect to manage the state

I have successfully implemented the Toast functionality from react-bootstrap into my application using the provided code. However, I am unsure if it is necessary to utilize useEffect to set show with setShow(items.length > 0);. Would it be simpler to ...

javascriptreactjstypescriptreact-hooks

Steps to efficiently enumerate the array of parameters in the NextJS router:

In my NextJS application, I have implemented a catch all route that uses the following code: import { useRouter} from 'next/router' This code snippet retrieves all the parameters from the URL path: const { params = [] } = router.query When I co ...

javascriptarraysnext.js

"Rearrange elements on a webpage using CSS and HTML to position one

Can we utilize CSS/HTML to visually move a full width element that is positioned below another one so that it appears above without altering the markup order? <div id="first">first</div> <div id="second">second</div> #first {…} ...

htmlcss

Trigger an event upon the completion of any AJAX request

Seeking to observe the onComplete event of all AJAX requests externally without being within the individual requests. Wanting to trigger an event when any or all AJAX requests finish. Is this achievable? Many thanks, Tim Edit: Only using Mootools libra ...

javascriptajaxmootools

Resolved the issue of the background image flickering during the transition of the slideshow at the top of

I'm experiencing a unique issue in Chrome only. On my webpage, I have a div with a fixed background image placed below a slider at the top of the page. However, when the slider advances to the next slide, the fixed background image almost completely d ...

cssgoogle-chrome

Banner ad will be displayed only once during your browsing session

What is the best way to display an advertisement banner only once per browser session using JavaScript or jQuery on a website? The ad should reappear each time the website is reopened in the browser after the session is closed. Additionally, the banner s ...

javascriptjquerycookieslocal-storagesessionstorage

Using Vue.js to display svg content inside the <svg> element

One of my Vue.js components is responsible for dynamically building the content of an svg element. Let's simplify things and say that the content consists of a <circle cx="50" cy="50" r="60" /> This component achieves this by manipulating a dat ...

javascriptvue.jssvg

Unable to upload photo using Ajax request

I am in the process of trying to utilize Ajax to upload an image, so that it can be posted after the submit button is clicked. Here is the flow: User uploads image -> Ajax call is made to upload photo User clicks submit -> Post is shown to the user ...

javascriptphpajax

Ensure that the sidebar automatically scrolls to the bottom once the main content has reached the bottom

I am facing an issue with a sticky sidebar that has a fixed height of calc(100vh-90px) and the main content. The sidebar contains dynamic content, which may exceed its defined height, resulting in a scrollbar. On the other hand, the main content is lengthy ...

javascriptcssreactjs

The function 'transformArticles' is not recognized as a property of the object 'Article'

I'm encountering an issue with Typescript that I need help understanding. In my code, I have a route where I am importing a class called Article like this: import { Request, Response } from "express"; const appRoot = require("app-root-path"); import ...

javascripttypescript

Error encountered during Webpack build process for bootstrap

As I was trying to start building my project, I encountered a "Warning." Any suggestions on how to resolve this? Additionally, is there a command for real-time building, besides "$ npm run build"? For example, something like "$ sass --watch" or a liv ...

node.jswebnpmwebpackbootstrap-4

React-spring is causing an increase in the number of hooks rendered compared to the previous render in React

I've encountered a similar issue as discussed on SO, but I'm struggling to resolve the problem detailed below. The scenario This code snippet found at the following link is functional: https://codesandbox.io/s/frosty-water-118xp?file=/src/App. ...

javascriptreactjsreact-hooksreact-spring

The Establishment Embrace of AJAX Interaction

I've been working on developing a check user system to prevent duplicates. The function below is successfully returning true or false, but for some reason it's not triggering the error display for the error class system. JavaScript $(document). ...

jqueryajaxzurb-foundationabide

Having trouble retrieving a response from my Symfony2 controller using AJAX, any suggestions on how to solve this issue?

After implementing a signin form that submits values through ajax successfully, I realized that regardless of whether the values match those in the database or not, I always receive a 200 status response from my controller. This makes it difficult to deter ...

jqueryajaxsymfony

Get rid of the inner image border using CSS

Can someone assist me in removing the border inside this image using CSS? The border of the image is problematic. Here is an example: https://i.sstatic.net/dcnpS.jpg Thank you..! ...

imagecss

What is the best way to loop through several rows in jQuery by leveraging the power of AJAX, JSON, and PHP

In my PHP script, I have a function that fetches data from a database query and encodes it into JSON format. Here is an example of the code: while ($row = oci_fetch_array($stid, OCI_ASSOC+OCI_RETURN_NULLS)) { $rows[] = $row; } print json_encode($r ...

phpjqueryajaxjson

css media queries not taking precedence over default styles

Struggling to find a solution as no similar case was discovered!! To avoid adding a class name for each page, I am eager to utilize a generic class name as shown below: <div id="news"> <div class="news column">content 1</div> &l ...

cssmedia-queries