CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
shenku
shenku

Reputation: 12448

Hiding button after collapse is toggled in bootstrap

Given the following code from the bootstrap website for the collapse functionality:

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a> 
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

What I would like to do is hide the link, that invokes the collapse functionality once its open, does anyone know of a way I can do this without adding additional Js?

Upvotes: 8

Views: 11273

Answers (6)

teemgie
teemgie

Reputation: 11

If you would like to be able to collapse the content and show the link again without reloading the page you can wrap the whole content section (your <div>) in the <a> element.

Place some link content before the actual collapsible content and give it a class or id. Then add a custom CSS class to the <a> tag as explained in the previous answer but add a child selector like this:

.toggle-hide[aria-expanded="true"] > /* your link content class or id here */ {
  display: none;
}

This will make the link less visible but you'll be able to click the content itself to collapse it and show back just the link.

Upvotes: 0

isherwood
isherwood

Reputation: 61083

This can be done in Bootstrap 5 (and presumably 4) using the native Accordion functionality. Place the button and the content in separate accordion item elements, and set the parent on the collapsible content per the docs.

Notice that I've hidden the accordion item borders with b-0.

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

<div class="accordion m-4" id="accordionArea">
  <div class="accordion-item border-0">
    <div class="accordion-collapse collapse show">
      <button class="btn btn-primary" role="button" 
        data-bs-toggle="collapse" data-bs-target="#content" 
        aria-expanded="false" aria-controls="content">Toggle button & content
      </button>
    </div>
  </div>

  <div class="accordion-item border-0">
    <div id="content" class="accordion-collapse collapse" 
      data-bs-parent="#accordionArea">
      <div>Some content.</div>
    </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>

Upvotes: 0

createscape
createscape

Reputation: 751

I used this to hide the button after it was clicked:

HTML (just added a class "hide-me"):

<button class="btn btn-default hide-me" data-toggle="collapse" data-target="#search" id="search-display">My Button</button>

CSS:

.hide-me[aria-expanded="true"] {display: none;}

Upvotes: 18

shenku
shenku

Reputation: 12448

This is what I was really looking for', without any CSS or JavaScript of my own, simply leveraging Bootstrap:

<a class="btn btn-primary hook in" data-toggle="collapse" href=".hook" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a> 
<div class="collapse hook">
  <div class="well">
    ...
  </div>
</div>

Heres the fiddle:

http://jsfiddle.net/hptrpaxh/1/

Upvotes: 4

Jake Taylor
Jake Taylor

Reputation: 4336

Sorry didn't see you were trying to do it without extra js. Here's an easy CSS trick. You can obviously modify it as well

give the button a class like hidden-button Then use this CSS

.hidden-button {
    position:relative;
    z-index:0;
}


.well {
    position:relative;
    margin-top:-33px;
    z-index:10000;
}

Here's a fiddle http://jsfiddle.net/cp5Lvtdo/4/

Upvotes: 1

trs
trs

Reputation: 863

Add this:

$('.btn').toggle();

I recommend you add an additional class to this button or give it an id to distinguish it from other buttons.

Upvotes: 1

Related Questions