If the CSS is currently set to visible, use a conditional statement to change it to hidden.
Using jQuery:
Check with jQuery:
if(dogSection.css('visibility') === 'hidden'){
// make it visible
}else{
// hide it
}
To set it to visible:
dogSection.css('visibility', 'visible')
To set it to 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>