Question

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

Answer 1

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;
});