Bootstrap data attribute failure prevents conflicting animations

Question

I used several smart selectors to make two switches or hide or show divs using the Bootstrap tool data-toggle="collapse".

If I click Show, a div will appear, and if I click Hide, it will crash.

But if, while the div is visible, I quickly click "Hide" and then "Show", "Show", but the div is not displayed.

I am very pleased with using attributes data-*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>

Run codeHide result

Answer 1

Here is the jquery way:

//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();
  }

});

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>

jsfiddle. , "app.js", html ,

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

Answer 2

, CSS. show CSS ~, .

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>

Hide result

Answer 3

Add show class to thing 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>

Run codeHide result