CSS Minimize/Maximize Box

Meap

Don't need glasses if you C#
Nov 7, 2010
1,045
296
How would I make it so I can minimize and maximize this box?
This is the css for it
Code:
#you{background-color:rgba(65,64,61,0.5);position:absolute;top:0px;right:200px;padding:7px;border-radius:0px 0px 3px 3px;width:165px;border:2px solid #41403d;}#exitb{background:url(http://playneko.co.uk/exit.png);height:19px;width:19px;border-radius:3px;}#exitb:hover{background:url(http://playneko.co.uk/exit_hover.png);}
and then this is the box code I have
Code:
<div id="you">
<div style="height: 110px; width: 57px; float: left; overflow: hidden;"><img src="http://www.habbo.nl/habbo-imaging/avatarimage?figure='.$user['look'].'&direction=3&head_direction=3&action=wav,crr=667&size=m" alt="avatar" class="rotate" align="left"></div><div style="position: absolute; z-index:1">'.$aanwezag.'</div><br/></td>
<div style="cursor:pointer;position:absolute;top:10px;left:65px;font-size:18px;font-family: Times;">%habboName%</div>
<div style="cursor:pointer;position:absolute;top:30px;left:65px;font-size:18px;font-family: Times;">' . $users->getRankName($user['rank']) . '</div>
<div style="cursor:pointer;position:absolute;top:50px;left:65px;font-size:18px;font-family: Times;"><font color="#FF0040">'. $user['age'] .' Years Old</font></div>
<div style="cursor:pointer;position:absolute;top:70px;left:65px;font-size:18px;font-family: Times;"><font color="#088A4B">'. $user2['AchievementScore'] .' Score</font></div>
<div style="cursor:pointer;position:absolute;top:90px;left:65px;font-size:18px;font-family: Times;"><font color="#01A9DB">'. $user2['Respect'] .' Respects</font></div>
<div style="cursor:pointer;position:absolute;top:81px;left:5px;font-size:20px;font-family: Times;"><img src="%www%/flags/'. $user['country'] .'.png"></div>
</div>

How would I add the little exit images to the right of the box and when you click it, it will minimize/maximize the box?
If anyone can help it would be greatly appreciated
 

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,638
2,393
HTML:
<a href="#" id="togglebox">show/hide</a>
<div id="contentbox">content here</div>

Then JavaScript for it
Code:
$(function(){
  $('a#togglebox').on('click', function(){
    $('div#contentbox').toggle();
  });
});

Here's a similar example from what I can gather of your badly explained question, just adjust it to what you need.
 

Users who are viewing this thread

Top