collapsable box

[Die Hard Gaming]

i have this box that is a announcement  how would i make it so that the user has a option to minimisze the box after they read it?

<if test="memberbox:|:$this->memberData['member_id']">

<div class="message unspecific">


		<h3>New Divisions, Getting Involved and More</h3>
		
		<p>*=*=*=*=*=*</p>
<p>&nbsp;</p>
<p><strong>DhW Newest Division: Minecraft, read more <a href="******/hq/topic/13-dhws-newest-division-minecraft/">HERE</a></strong></p>

<p>&nbsp;</p><p><strong>DhS Newest Divisions - Need for Speed, read more <a href="*****/hq/topic/14-dhs-newest-division-need-for-speed/">HERE</a></strong></p>

<p>&nbsp;</p>
<p>*=*=*=*=*=*</p>
<p>&nbsp;</p>
<p><strong>Vote DhG to Top 100 <a href="********/hq/topic/5-top-100-clans/">HERE</a></strong></p>
	</div>

	</div>
</if>

Edited December 8, 2013 by Die Hard Gaming

[Yuu]

Replace your code with this:

<if test="memberbox:|:$this->memberData['member_id']">
<script type="text/javascript">

    jQuery.noConflict();
    jQuery(document).ready(function($){
        $('#hide').click(function() {
            $('#msg').toggle(500);             // Replace 500 with the speed you want to use
        });
    });

</script>

<div class="message unspecific">


    <h3>New Divisions, Getting Involved and More <span class="right clickable" id="hide">Toggle Message</span></h3>
        
    <div id="msg">

        <p>*=*=*=*=*=*</p>
        <p>&nbsp;</p>
        <p><strong>DhW Newest Division: Minecraft, read more <a href="#">HERE</a></strong></p>

        <p>&nbsp;</p><p><strong>DhS Newest Divisions - Need for Speed, read more <a href="#">HERE</a></strong></p>

        <p>&nbsp;</p>
        <p>*=*=*=*=*=*</p>
        <p>&nbsp;</p>
        <p><strong>Vote DhG to Top 100 <a href="#">HERE</a></strong></p>

    </div>

</div>
</if>

 

On the right side, there will be text that says "Toggle Message", and that's where you'll click to hide the message.

Note: The message will appear unhidden every time you refresh the page with this code. You'll have to add some more code to make it stay minimized.

[Kingy]

The question(s) in this support topic have been answered and the owner has been able to solve the problem. Because of this, the support topic has been closed and moved.

If you have other questions, please open a new topic.