Toggle on button click

Question

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

:

Joey Etamity · Accepted Answer · 2016-07-20 16:43:01Z

1

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');
  });
});

edited Jul 20, 2016 at 16:43

answered Jul 20, 2016 at 16:19

Joey Etamity

8664 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Unbreakable Over a year ago

I am new to all this. So shall I write both the function together in a single <script> </script> tag

Unbreakable Over a year ago

I am still learning all of these. Anyways thanks for your answer. I am still getting some error may be because of silly mistake. Can you kindly see the EDIT portion of question.

Joey Etamity Over a year ago

did you include the flip library ?

Unbreakable Over a year ago

Let us continue this discussion in chat.

Unbreakable Over a year ago

@ShubhamBaranwal: thanks Shubham. I don't know I get error when I call flip ('toggle'). It sas flip is not a function. Can you kindly see the error I am getting. I have attached the screenshot. I am lost!

|

Rory McCrossan · Accepted Answer · 2016-07-20 16:15:58Z

0

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

answered Jul 20, 2016 at 16:15

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

1 Comment

Unbreakable Over a year ago

Thanks for the answer. Can you kindly see the Edit 2. I am getting some error.

Collectives™ on Stack Overflow

Toggle on button click

2 Answers 2

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related