How to follow a link and open a block via collapse in Bootstrap 5?

D

Denis Yeranov2021-11-14 22:52:17

Bootstrap

Denis Yeranov, 2021-11-14 22:52:17

Good afternoon.
Bootstrap 5 has this example of using collapse in Bootstrap 5:

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Here, when you click on a link or button, hidden content opens.
I have a goal. The first link should be removed from the site menu, and when you click on it, you go through the same page and open hidden content.
Tell me how to do it?
Replaced data-bs-toggle="collapse" with data-bs-toggle="collapsing" in the link. And in the opening block, I replaced class="collapse" with class="collapsing". The link began to be followed, but the block does not open. And I want the transition to occur and the block to open. Help, maybe someone is familiar with this collapse class ???

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

J

Johnny Gat, 2021-11-15
@JohnnyGat

The code:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Hello, world!</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#collapseExample">collapseExample</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <br><br> 1
    <br><br> 2
    <br><br> 3
    <br><br> 4
    <br><br> 5
    <br><br> 6
    <br><br> 7
    <br><br> 8
    <br><br> 9
    <br><br> 0
    <br><br> 1
    <br><br> 2
    <br><br> 3
    <br><br> 4
    <br><br> 5
    <br><br> 6
    <br><br> 7
    <br><br> 8
    <br><br> 9
    <br><br> 0
    <br><br> 1
    <br><br> 2
    <br><br> 3
    <br><br> 4
    <br><br> 5
    <br><br> 6
    <br><br> 7
    <br><br> 8
    <br><br> 9
    <br><br> 0

    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        </div>
    </div>

    <br><br> 1
    <br><br> 2
    <br><br> 3
    <br><br> 4
    <br><br> 5
    <br><br> 6
    <br><br> 7
    <br><br> 8
    <br><br> 9
    <br><br> 0

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <script>
        if (location.hash == '#collapseExample') {
            let bsCollapse = new bootstrap.Collapse(document.getElementById('collapseExample'));
            bsCollapse.show();
        }
    </script>
</body>

</html>