Home/ Questions/Q 6121175
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T15:45:16+00:00

I want to make a new span class called button. When the button is

  • 0

I want to make a new span class called “button”. When the “button” is clicked, it should run jQuery and flip .front not the “button”. I tried: $('.button').bind("click",function() { but it only effects the button, not the .front.

HTML:

<span class="button">Run!</span>

jQuery:

$(document).ready(function(){

    $('.front').bind("click",function() {

        // $(this) point to the clicked .front element (caching it in elem for speed):
        var elem = $(this);

        // data('flipped') is a flag we set when we flip the element:
        if(elem.data('flipped'))
        {
            // If the element has already been flipped, use the revertFlip method
            elem.revertFlip();

            // Unsetting the flag:
            elem.data('flipped',false)
        }
        else
        {
            // Using the flip method defined by the plugin:

            elem.flip({
                direction:'tb',
                speed: 350,
                onBefore: function(){
                    // Insert the contents of the .back div (hidden from view with display:none)
                    // into the clicked .front div before the flipping animation starts:

                    elem.html(elem.siblings('.back').html());
                }
            });

            // Setting the flag:
            elem.data('flipped',true);
        }
    });

});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to attach the event to button, then address the element you wish to manipulate in your function, e.g.

    $(".button").click(function(){

  var elem = $('.front');
  …

    UPDATE: Example of complete page (obviously you would likely put .js and .css in external files, this is just a demo), does this do what you want? If not, why/how not :

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
</script>
    <script src="jquery.flip.min.js" type="text/javascript">
</script>
    <script type="text/javascript">
    $(document).ready(function() {

        $(".button").live('click', function() {

            // $(this) point to the clicked .front element (caching it in elem for speed):
            var elem = $('.front');
            console.log(elem.data('flipped'));
            // data('flipped') is a flag we set when we flip the element:
            if (elem.data('flipped'))
            {
                // If the element has already been flipped, use the revertFlip method
                elem.revertFlip();

                // Unsetting the flag:
                elem.data('flipped', false)
            }
            else
            {
                // Using the flip method defined by the plugin:
                elem.flip({
                    direction: 'tb',
                    speed: 350,
                    onBefore: function() {
                        // Insert the contents of the .back div (hidden from view with display:none)
                        // into the clicked .front div before the flipping animation starts:
                        elem.html(elem.siblings('.back').html());
                    }
                });

                // Setting the flag:
                elem.data('flipped', true);
            }
        });

    });
    </script>
    <style type="text/css" media="screen">
    .front
    {
    width: 400px;
    height: 300px;
    background-color: red;
    }

    .back
    {
    display: none;
    }

    .button
    {
    display: block;
    border: 1px solid black;
    width: 50px;
    }
    </style>
  </head>
  <body>
    <div class="front">
      <span class="button">Run!</span>
      <p>
        Hello World!
      </p>
    </div>
    <div class="back">
      <span class="button">Run!</span>
      <p>
        I am back
      </p>
    </div>
  </body>
</html>
    • 0