jQuery Toggle [hidden] Attribute Bootstrap 4

dazzafact picture dazzafact · Oct 26, 2017 · Viewed 12k times · Source

Whats the best way to toggle the new "Bootstrap 4" [hidden]-Attribute. Not just hiding and showing the element with "display: block" but rather removing and adding the Attribute.

<button type="button" hidden class="hideMe btn  btn-sm">Get Video</button> 
<button class="toggle">toggle</button>

is there a better Way like this: http://jsfiddle.net/49u2q/123/

$('button.toggle').on('click',function() {
    if ($('button.hideMe ').is('[hidden]')) {
        $('button.hideMe ').removeAttr('hidden');
    } else {
        $('button.hideMe ').attr('hidden','');
    }
});

Answer

krishnar picture krishnar · Oct 26, 2017

Using toggle()

$('button.toggle').on('click',function() {
  var bool=$(".video_btn").is(":hidden")
  $(".video_btn").toggleClass('hidden')
  $(".video_btn").attr('hidden',!bool)
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button type="button" hidden class="hidden video_btn btn  btn-sm">Get Video</button>

<button class="toggle">toggle</button>