CODEWITHSUNDEEP
jqueryflip
Simon Rogers
Simon Rogers

Reputation: 101

Adapting jquery.flip to toggle with button click

I'm learning jquery and I'm trying to make this flip plugin toggle the flipped and unflipped settings by pressing a single button, but currently I can't work out how to adapt the manual trigger to do this.

http://nnattawat.github.io/flip/

Here is the relevant code:

<script type="text/javascript">
  $(function(){


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

    $("#flip-btn").click(function(){
      $("#card-4").flip(true);


    });

    $("#unflip-btn").click(function(){
      $("#card-4").flip(false);
    });
  });
</script>

What is the best way to do this? I was trying to re-write the code so that it would ask if flip was true, and if it was then clicking a button would make it flip false.

Best,

Simon

Upvotes: 0

Views: 2244

Answers (1)

cfnerd
cfnerd

Reputation: 3799

I downloaded the plugin and set it up in my environment. I am on bootstrap v3.3.4 and jQuery v2.1.3. I was able to get it to work in my environment doing this:

HTML

<div class="row">
    <div class="col-md-6">

        <div id="card-4"> 
            <div class="front"> 
                Front content
            </div> 
            <div class="back">
                Back content
            </div> 
        </div>

    </div>
    <div class="col-md-6">
        <button class="btn btn-success" id="flip-btn">Click to FLIP</button> 
    </div>

</div><!-- /.row -->

JQUERY

<script>
    $("#card-4").flip({
      trigger: "manual"
    });

    $(document).on("click", "#flip-btn", function() {
        $("#card-4").flip(true);
        $(this).attr("id","unflip-btn").text("Click to UNFLIP").removeClass("btn-success").addClass("btn-danger");
    });

    $(document).on("click", "#unflip-btn", function() {
        $("#card-4").flip(false);
        $(this).attr("id","flip-btn").text("Click to FLIP").removeClass("btn-danger").addClass("btn-success");
    });
</script>

Hope this helps. Otherwise, put your JS and HTML into JSFiddle so we can better diagnose the problem.

Upvotes: 1

Related Questions