基于引导折叠更改按钮 state

Question

I am using bootstrap.

I have the HTML code below:

 <div class="row">
        <button id="dog-btn" data-toggle="collapse" data-target="#dog-section" onclick="petToggle()">Show Pet</button>
    </div>


    <div class="col-12 collapse" id="dog-section">

I have the JS below:

function petToggle() {
          var dogDiv = document.getElementById("dog-section");
          var dogBtn = document.getElementById("dog-btn");
 
        }

In my website the starting state of dog-section is variable. Sometimes it could be visible sometimes it can be closed. I tried using:hidden and:visible with jquery to get the initial state of the div but it didn't work as it always returned true or always returned false. My desired outcome: if dog-section is hidden because of Bootstrap dropdown I want the button to read Show Pet. If the dog-section is visible, I want it to read Hide Pet.

Can anyone help?

Answer 1

Use a conditional to check if the css is set to visible if it is then set it to hidden .

With jQuery:

To check:

if(dogSection.css('visibility') === 'hidden'){
  // make it visible
}else{
  // hide it
}

To set visible:

dogSection.css('visibility', 'visible')

To set hidden:

dogSection.css('visibility', 'hidden')

 const $btn = $('#dog-btn') const $dogSection = $('#dog-section') function petToggle(){ $btn.click(function(){ if($dogSection.css('visibility') === 'hidden'){ $dogSection.css('visibility', 'visible') $btn.text("Hide Pet Section") }else{ $dogSection.css('visibility', 'hidden') $btn.text("Show Pet Section") } }) } petToggle()

 #dog-section { visibility: hidden; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <button id="dog-btn" data-toggle="collapse" data-target="#dog-section">Show Pet Section</button> </div> <div class="col-12 collapse" id="dog-section"> <img src="https://www.petmd.com/sites/default/files/sleeping-dogs-curled-up.jpg" alt="Sleeping Dog" width="450" height="355"> <img href=""> </div>

Using vanilla Javascript...

Depending on how you are displaying your #dog-section in the DOM you can use one of the following.

if(getComputedStyle(dogSection).getPropertyValue('visibility') === 'hidden')

if(getComputedStyle(dogSection).getPropertyValue('display') === 'none')

if(dogSection.style.visibility === 'hidden';

if(dogSection.style.display === 'none';

Then set it using one of the following:

dogSection.style.setProperty('visibility', 'visible')

dogSection.style.visibility = 'visible'

 const btn = document.getElementById('dog-btn') const dogSection = document.getElementById('dog-section') function petToggle(){ btn.addEventListener('click', function(){ if(getComputedStyle(dogSection).getPropertyValue('visibility') === 'hidden'){ dogSection.style.setProperty('visibility', 'visible') btn.textContent = "Hide Pet Section" }else{ dogSection.style.setProperty('visibility', 'hidden') btn.textContent = "Show Pet Section" } }) } petToggle()

 #dog-section { visibility: hidden; }

 <div class="row"> <button id="dog-btn" data-toggle="collapse" data-target="#dog-section">Show Pet Section</button> </div> <div class="col-12 collapse" id="dog-section"> <img src="https://www.petmd.com/sites/default/files/sleeping-dogs-curled-up.jpg" alt="Sleeping Dog" width="450" height="355"> <img href=""> </div>

Answer 2

Remove the petToggle function. You need to use the collapse events to achieve what you want. Here's documentation .

Since dog-section might be hidden or shown initially, you can check the display style of the section and change button text accordingly.

 // check the initial display state of the dog-section // if it's hidden, set the button text to "Show Pet" // if it's shown, set the button text to "Hide Pet" if ($("#dog-section").css("display") === "none") { $("#dog-btn").text("Show Pet"); } else { $("#dog-btn").text("Hide Pet"); } // set the button text to "Hide Pet" when dog-section is shown $("#dog-section").on("show.bs.collapse", function () { $("#dog-btn").text("Hide Pet"); }); // set the button text to "Show Pet" when dog-section is hidden $("#dog-section").on("hide.bs.collapse", function () { $("#dog-btn").text("Show Pet"); });

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <div class="container"> <div class="row"> <button id="dog-btn" data-toggle="collapse" data-target="#dog-section">Show Pet</button> </div> <div class="row"> <div class="col-12 collapse" id="dog-section"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quia suscipit amet ex aut. Odit error dolorem tempore, officiis sed, fugit in voluptate laboriosam quas illo ipsa alias magnam. Odit. </div> </div> </div>