Question 61344 in Twitter Bootstrap Question posted in

Creating a collapsible div with nested links/buttons with bootstrap-Twitter bootstrap

I would like to create a collapsible "card" with a row of buttons on the lower part of the collapsible div. A bit like a twitter card which has a row of buttons on the lower side. In this example, the card itself is clickable (and I would like it to be collapsible). In my case, I would like there to be a little arrow on the right had side that indicates whether the collapsible div is folded or unfolded. Moreover, I would like to write multiple paragraphs within the collapsible div (above the row of buttons).

I tried several things, but I haven’t figured out how to do this. It shouldn’t be too hard, but I’m not a very good coder so I would appreciate it very much if somebody could help.

I already tried the following with bootstrap

.block {
  position:relative;
}

.block .overlay {
  position:absolute;
  left:0; top:0; bottom:0; right:0;
}

.block .inner {
  position:relative;
  pointer-events: none;
  z-index: 1;
}

.block .inner a {
  pointer-events: all;
}
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  </head>
  <body>
  <div class="accordion-item">
<div class="accordion-button block " type="button">
  <a class="overlay" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"></a>
  <div class="inner">
    <p>This entire box is collapsible.</p>
    <p>But somehow the arrow on the right side does not turn</p>
    <a href="https://duckduckgo.com/">I'm a clickable link that could also have been a button</a>
  </div>
</div>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
   Exra information about the thing written above.
  </div>
</div>
</div>
<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>
</body>

The arrow on the right hand side is unfortunately not clickable and does not rotate.

Tags:

2

Answers


  1. 0

    this is an example of collapsing, but if you want to redirect the clicker to the author’s page, he’ll not see the collapsing

    let card = document.querySelector('.card');

card.addEventListener('click', ()=>{
  card.classList.toggle('active');
  })
    .card{
  background: #000;
  display: block;
  width: 400px;
  height: 50px;
  color: white;
  padding: 16px;
  transition: .1s ease-in-out all;
  cursor: pointer;
}
.collapse{
  display:none;
  height: 250px;
}
.card.active{
  height: 300px;
}
.card.active .collapse{
  display: block;
}
    <div class="card">
  <p> post </p>
  <div class="collapse">
   
   <br>
   <br>
   <br>
   <br>
   <br>
    <p>likes ............</p>
  </div>
</div>

    EDIT: if you want to set the collapsing on a button inside the card, just change the event listener to it BUT not the class toggling

    ANOTHER EDIT:
    to use it in bootstrap, you can customize it

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<div class="card card-body" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  <p>card</p>
  <div class="collapse" id="collapseExample">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

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

    if you want to set the collapsing on a button inside the card, just add these attributes data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" to the button

    let icon = document.querySelector('.icon');

icon.addEventListener('click', () => {
  icon.classList.toggle('flip');
});
    .icon {
  position: absolute;
  right: 0;
  outline: none !important
}

.icon svg {
  transition: .2s ease all;
}

.icon.flip svg {
  transform: rotate(180deg);
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<div class="card card-body w-70" style="cursor: pointer;">
  <p>card</p>
  <button class="btn icon" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"/></svg>
  </button>
  <div class="collapse" id="collapseExample">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>
<script src="https://unpkg.com/feather-icons"></script>
<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>
    Login or Signup to reply.
  2. 0

    I suggest to you to read this page of Bootstrap docs:
    https://getbootstrap.com/docs/5.1/components/collapse/

    Here there is all you need.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search