changing button based on bootstrap collapse 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

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>

Answer 2

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>