Expand

  • Thread starter Thread starter Anonymous
  • Start date Start date
A

Anonymous

Guest
I had a script on the Expand and Contract.

Code: 
<div style="height: 10px; width: 160px; overflow: hidden;" onmouseover="this.style.height='auto'; return false;" onmouseout="this.style.height='10px'; return false;" align="left">
<span class="gensmall"><a href="#">Expand/Contract stats...</a></span><br /><br />PUT WHAT EVER EXPAND HERE</span></div>

This is for mouseover but how can I change it to onmouseclick? So that when I click, it expand, when I click again it contract.

Anyone could help me out?
 
set a var before the div, then something like

div_var = 1;
....
<div style="........." onclick="div_var*=-1; this.style.height = (div_var < 0) ? 'auto' : '10px'; return false;" align="..."><span></ </

should work - basically just multiplies div_var by minus one on each click and then tests whether div_var is below zero (every other click) and sets the height to the relative setting

you *might* even get away with

"this.style.height = ((div_var*=-1) < 0) ? 'auto' : '10px';"
 
I not sure where should I put the var at but can I put the var this way?

Code: 
<div style="........." onclick="div_var = 1; this.style.height = ((div_var*=-1) < 0) ? 'auto' : '10px'; return false;" align="left">

If so, when I click, it did expand but when I click again, it did not contract. Do you have any idea about it?

BTW I adding this code in my forum at viewtopic_body.tpl.
 
no - you need to define the var before the div

<script type="text/javascript">/*<![CDATA[*/div_var = 1;/*]]!>*/</script>
<div style="height: 10px; width: 160px; overflow: hidden;" onclick="this.style.height = ((div_var*=-1) < 0) ? 'auto' : '10px';" align="left">
<span class="gensmall"><a href="#">Expand/Contract stats...</a></span><br /><br />PUT WHAT EVER EXPAND HERE</span></div>

if you have an earlier script on the page, you can sling the div_var = 1; in that, else just add it like above.
 
Well, you'd have to make it so that when the user clicks on the link, it reloads the page but with GET values (e.g. page.php?collapsed=6) that tell it which parts are collapsed and which are expanded.
 
You must log in or register to reply here.
Back
Top