CODEWITHSUNDEEP
javascriptjqueryfadeinfadeout
Laurens Hoogland
Laurens Hoogland

Reputation: 17

Changing Text of Button as well fadetoggle function in jquery

<button id="myButton" class="comment-submit button small green">Play Video</button>

$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle(3000);
    });
});

So i got this code, which basicly pops up a video when i hit the playbutton, Works like a charm but:

I want the text of the button to change to Hide Video, once they clicked "Play Video", and back to "Play Video" if they click "Hide Video"

I found a bunch of solutions, but the problem is, im a jquery nub, even worse, im pretty new to web building.

So where should i put the code, for example this solution:

$('.SeeMore2').click(function(){
    var $this = $(this);
    $this.toggleClass('SeeMore2');
    if($this.hasClass('SeeMore2')){
        $this.text('See More');         
    } else {
        $this.text('See Less');
    }
});

so confused of what im missing

Upvotes: 0

Views: 1739

Answers (2)

Alimon Karim
Alimon Karim

Reputation: 4469

I think it can be more easy by this code.

 <script>
            $(document).ready(function(){
                $('#click').click(function(){
                    $("#videoWrap").slideToggle();
                    var $this = $(this);
                      $this.html() == "Play Video" ?  $this.html("Hide video") :  $this.html("Play Video");
            });
        });
</script>

Upvotes: 0

n1k1ch
n1k1ch

Reputation: 2702

Here is the demo

HTML:

<button id="myButton" class="videoHidden">Play Video</button>
<div id="videoWrap">Video is here</div>

CSS:

#videoWrap {
    width: 150px;
    height: 100px;
    background-color: #9ff;
    display: none;
}

JavaScript:

$(document).ready(function(){
    $('#myButton').click(function(){
        var $this = $(this);
        $("#videoWrap").fadeToggle();//or .toggle() for instant showing/hiding
        $this.toggleClass('videoHidden');

        if($this.hasClass('videoHidden')){
            $this.text('Play Video');           
        } else {
            $this.text('Hide Video');
        }
    });
});

So:

  1. Once document is loaded, you have a button which has "Play Video" text and "videoHidden" class
  2. When you click on the button, it toggles "videoHidden" class on the button (adds if not exists or removes if exists). It helps you to save some "state" of video playing.
  3. Then you use current "state" to change button's text to corresponding value ("Play Video" if video isn't playing, "Hide Video" if video is playing)

Edited

There is an error here http://biready.visseninfinland.nl/testing-2/:

At line 467 there is erroneous script

<script>
    $('#myButton').click(function(){
        var $this = $(this);
        $("#videoWrap").slideToggle();</p>
<p>        $this.toggleClass('videoHidden');</p>
<p>     if($this.hasClass('videoHidden')){
            $this.text('Play Video');           
        } else {
            $this.text('Hide Video');
        }
    });
</script>

You should remove </p> and <p> from it

Edited 2

The last version of script (need to perform attaching handler within $(document).ready()):

$(document).ready(function(){
    $('#myButton').click(function(){
        var $this = $(this);
        $("#videoWrap").slideToggle();
        $this.toggleClass('videoHidden');
        if($this.hasClass('videoHidden')){
            $this.text('Play Video');
        } else {
            $this.text('Hide Video');
        }
    });
});

Upvotes: 3

Related Questions