Bootstrap data attribute collapse prevent conflicting animations

user_684776 0
Viewed 1031

I've used some clever selectors to make two radio buttons either hide or show a div using Bootstrap's data-toggle="collapse" tool.

If I click "Show", the div appears, and if I click "Hide", it collapses.

But if, while the div is visible, I click "Hide" then "Show" again very quickly, "Show" is checked, but the div is not visible.

I'm very happy with using data-* attributes instead of custom Javascript... is there a way to prevent these "conflicting animations", if that is what they are?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<input id="rbone" 
    type="radio" 
    name="group" 
    data-toggle="collapse" 
    data-target="#thing:not(.show)" />
<label for="rbone">Show</label><br />
<input id="rbtwo" 
    type="radio" 
    name="group" 
    data-toggle="collapse" 
    data-target="#thing.show" />
<label for="rbtwo">Hide</label>

<div id="thing" class="collapse">Nothing to see here.</div>

twitter-bootstrap javascript
3 Answers

Here is the solution by using the pure CSS. Here If the show radio button is selected by using the CSS selector ~ I applied the style for sibling content.

CSS

   #rbone:checked ~ #thing {
         display: block !important;
    }

DEMO

/* Updated CSS  */

#rbone:checked ~ #thing {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<input id="rbone" 
    type="radio" 
    name="group" 
    data-toggle="collapse" 
    data-target="#thing:not(.show)" />
<label for="rbone">Show</label><br />
<input id="rbtwo" 
    type="radio" 
    name="group" 
    data-toggle="collapse" 
    data-target="#thing.show" />
<label for="rbtwo">Hide</label>

<div id="thing" class="collapse">Nothing to see here.</div>

user_57463010

Here is a jquery way of doing it: 

//On click of show, fade in 
$( ".show" ).click(function() {
  $('#thing').fadeIn();
});

//On click of hide, fade out
$( ".hide" ).click(function() {
  $('#thing').fadeOut();
});

option 2

$( ":radio" ).click(function() {
    //if radio button has the class show, fade In
    if ($(this).hasClass('show')){
    $('#thing').fadeIn();
      //if radio button has the class hide, fade out
  } else if ($(this).hasClass('hide')) { 
    $('#thing').fadeOut();
  }

});

Here is the HTML:

<input id="rbone" type="radio" name="group" class="show" />

<label for="rbone">Show</label>
<br />
<input id="rbtwo" type="radio" name="group" class='hide'/>
<label for="rbtwo">Hide</label>

<div id="thing">
  <p>
    Nothing to see here
  </p>.</div>

Here is a jsfiddle. You can add this to a file like "app.js", then include it in your html file like 

<script src="app.js"></script>
user_62940390

Add show class into thing id with show input checked attribute. without adding extra css or js code. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<input id="rbone" 
    type="radio" 
    name="group" 
    data-toggle="collapse" 
    data-target="#thing:not(.show)" checked />
<label for="rbone">Show</label><br />
<input id="rbtwo" 
    type="radio" 
    name="group" 
    data-toggle="collapse" 
    data-target="#thing.show" />
<label for="rbtwo">Hide</label>

<div id="thing" class="collapse show">Nothing to see here.</div>

user_70529270
Related