Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Toggle [hidden] Attribute Bootstrap 4

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','');
    }
});
like image 896
dazzafact Avatar asked Nov 08 '22 15:11

dazzafact


1 Answers

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>
like image 108
krishnar Avatar answered Nov 15 '22 07:11

krishnar