CODEWITHSUNDEEP
jqueryslide
422
422

Reputation: 5770

Change open / close text onclick

Found a fiddle on stack, and played with it a tad to suit our needs.

But .. I need to the "tab" thats below the container div, to change text based on what state. ie. if open text should say close and vice versa and other element hidden.

I am guessing we should be able to add if else condition to js. Just a little stuck.

Fiddle here: http://jsfiddle.net/ozzy/zEcXp/

Code:js

$(document).ready(function(){
$("div#panel").show();

var autoTimer = null;

autoTimer = setTimeout(function(){
    $("div#panel").slideDown("slow");
    autoTimer = setTimeout(function(){
        $("div#panel").slideUp("slow");
    }, 5000);
},2000);

$("#open").click(function(){
    $("div#panel").slideDown("slow");
    if(autoTimer) clearTimeout(autoTimer);
    autoTimer = null;
});

$("#close").click(function(){
    $("div#panel").slideUp("slow");
    if(autoTimer) clearTimeout(autoTimer);
    autoTimer = null;
});

}); code: html

<div id="widget">
 <div id="panel">Slidepanel<br />Slidepanel<br />Slidepanel</div>
  <div id="open">Open</div>
  <div id="close">Close</div>
</div>

code:css

#widget {position:relative;width:500px;height:100%;}
#panel{height:100px;background:#fafafa;border:1px solid #cccccc;z-index:1;}
#open {cursor:pointer;position:absolute;left:50%;
padding:0px 8px;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-top:1px solid #ffffff;
z-index:2;}
#open:hover ,#close:hover {color:#3399ff;}
#close {cursor:pointer;position:absolute;left:50%;bottom:0px;}

The code is very crude, I realise we can shortcut the css etc. But have done it this way so you can see the issue. To recap, I am happy with the TAB position, just need to either show Open or Closed dependant on the Panel state. So only show Open tab and make it clickable if panel is closed and vice versa.

Cheers.

.ps just wondering if toggle would work better. But anyhoo.. lets fix this first

Upvotes: 1

Views: 5643

Answers (3)

mrtsherman
mrtsherman

Reputation: 39872

I didn't really understand what your whole timer stuff was about, but here is a simple means of sliding open/closed the panel and changing the message text. I bind to the click event of a single element, toggle_panel and then use jQuery's slideToggle which handles hiding/showing the div. Finally I just do a simple check of the text inside slide_toggle. If it says 'Closed' then I change it to Open. Otherwise it must be Closed. This is called a ternary operator. If you want to be more clever you perhaps will want to check either the display state for determining text or storing the state using jQuery's data method. I think this is the most straightforward for your use case though.

http://jsfiddle.net/X9Vn4/79/

$("div#panel").show();

$("#toggle_panel").click( function() {
    $('#panel').slideToggle();
    $(this).html($(this).html() == 'Closed' ? 'Open' : 'Closed');                    
});

Another solution based on the fact that checking div visibility is more secure than checking contents of html

$("#toggle_panel").click(function(){
    if ($("div#panel").is(':visible')) {
         $(this).html('Close');           
    }
    else {
         $(this).html('Open');                       
    }
    $("div#panel").slideToggle("slow");
    if(autoTimer) clearTimeout(autoTimer);
    autoTimer = null;
});

Upvotes: 2

XepterX
XepterX

Reputation: 1011

You can use this in your code. you can improve the code from here on

HTML

<div id="panel">Slidepanel<br />Slidepanel<br />Slidepanel</div>
<div id="openClose">Close</div>

JS

$(document).ready(function(){
    $("div#panel").show();

    var autoTimer = null;

    autoTimer = setTimeout(function(){
        $("div#panel").slideDown("slow");
        autoTimer = setTimeout(function(){
            $("div#panel").slideUp("slow");
        }, 5000);
    },2000);

    $("#openClose").click(function(){
        $("div#panel").toggle("slow");
        if($("#openClose").text()=="Close"){
            $("#openClose").text("Open");
        }
        else
            $("#openClose").text("Close");
        if(autoTimer) clearTimeout(autoTimer);
        autoTimer = null;
    });        
});

Upvotes: 0

vdbuilder
vdbuilder

Reputation: 12974

The html need to be (of course the css should be moved to a style sheet):

<div id="panel">Slidepanel<br />Slidepanel<br />Slidepanel</div>
<div id="open" style="display:none;">Open</div>
<div id="close">Close</div>

The javascript should be:

$(document).ready(function(){
    $("div#panel").show();

    var autoTimer = null;

    autoTimer = setTimeout(function(){
        $("div#panel").slideDown("slow");
        autoTimer = setTimeout(function(){
            $("div#panel").slideUp("slow");
        }, 5000);
    },2000);

    $("#open").click(function(){
        $("div#panel").slideDown("slow");
        $("div#open").hide();
        $("div#close").show();
        if(autoTimer) clearTimeout(autoTimer);
        autoTimer = null;
    });

    $("#close").click(function(){
        $("div#panel").slideUp("slow");
        $("div#open").show();
        $("div#close").hide();
        if(autoTimer) clearTimeout(autoTimer);
        autoTimer = null;
    });         
});

Here's a fiddle of it working:
http://jsfiddle.net/K37uz/

Upvotes: 1

Related Questions