minimize and maximize the text using javascript
===

i write the code for maximize/maximize the text ,when we click the symbol [+] ,i tried something.the following is the code what i tried

html code:

    <div style="font:12px verdana;background:#fefcd9;padding:10px 10px 10px 10px;border:solid 1px lightgray;" id="text">
    Instructions<span id="min" style="cursor:pointer;float:right;">[+]</span><span id="max" style="cursor:pointer;float:right;">[-]</span><br/><br/>
    Perhaps you should look for someone who will dig deep to learn about you, your business, your services and products. A writer who will put herself in the shoes of your potential customers in order to answer these important questions:hhhhhhhh
    </div>

javascript:

    <script type="text/javascript">
    $('#text').click(function(){
     $("#min").toggle(200);
        $("#max").toggle(200);
    });
    </script>
 

here what i want is ,in the above div first it has to display "instuctions   and  [+]" when i click the [+] symbol it has to maximize the div and display all the remaining text and here it has to display the [-]symbol in the place of [+].and when we again click  again the [-]symbol it has to minimize the div and display instructions and [+] symbol.can any one help me ...
    