如何在JQuery / JS中触发data- *事件？

Question

I'm actually new to JQuery, and i am trying to trigger a quick view from the css framework Bulma, you can get documentation on the quickview here:

https://wikiki.github.io/components/quickview/

The quickview is set like this:

<div id="quickviewDefault" class="quickview">
  <header class="quickview-header">
    <p class="title">Quickview title</p>
    <span class="delete" data-dismiss="quickview"></span>
  </header>

  <div class="quickview-body">
    <div class="quickview-block">
      ...
    </div>
  </div>

  <footer class="quickview-footer">

  </footer>
</div>

And i can call it with this button (as saw on the wiki):

<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>

So far its working, but i want to create a second button that ll call the quickview with JQuery, how can i do it ?

So far i've tried to click on the button who work great with JQuery when i click on my second button.

<!-- First button, work great -->
<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>

<!-- Second button, doesn't work yet -->
<button class="clickmeplz">></button>

The first button is working well, and the second one should call the same quickview as the first one but with JQuery.

This is the code i've tried so far with my second button.

$(document).ready(function(){
    $(".clickmeplz").click(function(){
         $('button[data-target="quickviewDefault"]').click();
    });
});

Unfortunately, it seem that the method click() cannot trigger the event of my first button like this.

Answer 1

Hello !

Let's try this:

$(document).ready(function(){
    $(".clickmeplz").click(function(){
        if($('div#quickviewDefault.is-active').length) { //If the quickview is showed
            $('div#quickviewDefault.is-active').removeClass('is-active'); //Remove the class to hide
        }else { 
            $('div#quickviewDefault').addClass('is-active'); //Add the class to show
        }
    });
});