CODEWITHSUNDEEP
javascriptjqueryhtmlfrontend
Unbreakable
Unbreakable

Reputation: 8132

Toggle on button click

I am new to web development. And I am stuck with one issue. I have implemented a flip functionality. Where if I click on the div, the element flips. Below is what I have tried.

<div class = "flip" id = "flip">
  <div class = "front">
      <div id = "chartAnchor1" class="x_content">
       </div>
  </div>
  <div class = "back">
      <div id = "abcanchor1" class="x_content">
      </div>
  </div>
</div>

Here abcanchor1 and chartanchor are the anchor where the actual template is embedded. I am using https://nnattawat.github.io/flip/ plug in to implement flip. At present I am able to flip when the div is clicked. But I want that to happen on button click.

Code to flip :

$("#flip").flip();

But all it does is, it flips the element when clicked upon. So, default trigger is 'click' event.

I want the same functionality to work by cliking on a button rather than clicking on the div itself.

<button type="button" id = "toggle" class = "toggle">Click Me!</button>

Everything (flip) is working fine. All I want is to trigger the flip on a button click. It's given in this link: https://nnattawat.github.io/flip/ on how to implement the flip (toggle) on button click but I am not able to implement that. Can someone guide me.

EDIT

<script>
$(function()
{
      $("#flip").flip({
  trigger: 'manual'
});
      $('#toggle').click(function() {
   $("#flip").flip('toggle');
});
 });
</script>

Error: When the button is clicked I get this error

 firstDashboard.html:34 Uncaught TypeError: $(...).flip is not a function

EDIT 2:

Code Base:

<button type="button" id = "toggle" class = "toggle">Click Me!</button>

    <div class = "flip" id = "flip">
      <div class = "front">
          <div id = "chartAnchor1" class="x_content">
          </div>
      </div>
      <div class = "back">                        
          <div id = "abcanchor1" class="x_content">
          </div>
      </div>
    </div>

<script src="../Scripts/jquery.flip.js"></script>
<script>
$(function()
{
     $("#flip").flip({
  trigger: 'manual'
});
   $('#toggle').click(function() {
   $("#flip").flip('toggle');
}); });
</script>

Error: Uncaught TypeError: $(...).flip is not a function

Error screeshot:

Upvotes: 0

Views: 1141

Answers (2)

Joey Etamity
Joey Etamity

Reputation: 866

Please check this demo: https://jsfiddle.net/hv83LLbw/

You need to set trigger to manual:

$("#flip").flip({
  trigger: 'manual'
});

and then attached the click event handling:

$('#toggle').click(function() {
   $("#flip").flip('toggle');
});

The over all 

$(document).ready(function() {
  $("#flip").flip({
  trigger: 'manual'
  });
$('#toggle').click(function() {
  $("#flip").flip('toggle');
  });
});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337714

You can do this by hooking a click event to that button and calling flip() within the event handler, like this:

<div class="flip" id="flip">
  <div class="front">
      <div id="chartAnchor1" class="x_content"></div>
  </div>
  <div class = "back">
      <div id="abcanchor1" class="x_content"></div>
  </div>
</div>
<button type="button" id="toggle" class="toggle">Click Me!</button>

$('#toggle').click(function() {
    $('#flip').flip();
});

Upvotes: 0

Related Questions