javascript - Hiding button after collapse is toggled in bootstrap - Stack Overflow

admin管理员组

文章数量:1188991

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?

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?

• javascript
• jquery
• css
• twitter-bootstrap

Share Improve this question Follow asked Jan 21, 2015 at 1:04 shenkushenku 12.4k1414 gold badges6666 silver badges122122 bronze badges 0

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 18

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

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/

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.

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/

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>

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.

本文标签： javascriptHiding button after collapse is toggled in bootstrapStack Overflow