Question

I want to toggle open and hide words when I toggle the panel.

Here is the code I used. it works only for hide but when I click next time it doesnt show open.

$(document).ready(function(){
        $(".flip1").click(function(){
            $(".panel1").slideToggle("slow");
       var val= 0;
       if(val==0){
        $('#word').html("hide").show();
        val=1;
       }else{
        $('#word').html("open").show();
        val=0;

       }
           // $(".info").hide();
        });
    });

help me to correct this.

Answer 1

Move this line:

var val= 0;

Out of the click() callback.

Where you have it it is a local variable within your click handler, and it gets set to 0 every time the handler is called. Move it outside the handler and it will get initialised to 0 once, and then updated within the click handler.

Alternatively, get rid of that variable altogether and do something like this:

$(document).ready(function(){
    $(".flip1").click(function(){
        $(".panel1").slideToggle("slow");
        $("#word").html(function(i,oldHtml) {
           return oldHtml==="hide"?"show":"hide";
        }).show();
    });
});

Demo: http://jsfiddle.net/9S5eq/

EDIT: If you pass a callback to the .html() method, jQuery calls it for each element in the jQuery object, passing the index of the current element within the object and that element’s current html. It sets the html to whatever value you return. So in this case where there is only one element the index parameter isn’t actually needed at all, but you can’t leave it out because the current value is passed in the second parameter (so i is just a sort of placeholder).