使用javascript最小化和最大化文本

Question

I wrote the code for minimizing and maximizing the text when we click the symbol. I have tried the following:

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>

In the above the first div has to display "instructions" and the "[+]". When I click the "[+]" symbol it has to maximize the div and display all the remaining text. Also the [+] symbol has to be replaced with a [-] symbol, which will minimize the text.

Can anyone help me?

Answer 1

Ok I think this jsFiddle will answer your question!

I used jQuery UI core because with it you can do very cool animation like stuff with your elements, and basically you need two functions for each button (trust me this is the best way) and gave one of the buttons display: none; so when it toggles the [-] and [+] change places like you wanted.

So the js part:

$(".tr").click(function() {
    $(".bc").toggle("blind");
    $(".tr").find("span").toggle();
});

The html part:

<div class="container clearfix" id="text">
    <div class="tl">Instructions</div><div class="tr"><span class="min-button">[-]</span><span class="max-button" style="display: none;">[+]</span><br/><br/></div>
    <div class="bc">
        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>
</div>

And the css part:

.container{
    margin-top: 40px;
    font:12px verdana;
    background:#fefcd9;
    padding:10px 10px 10px 10px;
    border:solid 1px lightgray;
    width: 400px;
}

.container .tl{
    position: relative;
    float: left;
}

.container .tr{
    position: relative;
    float: right;
}

.tr .min-button{
    cursor:pointer;
    float:left;
}

.tr .max-button{
    cursor:pointer;
    float:left;
}

.container .bc{
    position: relative;
    display: inline-block;
    float: right;
}

.clearfix:after
{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix
{
    display: inline-block;
}

Answer 2

You probably want to use slideToggle() not toggle()

The text to reveal should also be hidden at first

Answer 3

try this:

http://jsfiddle.net/VvkSZ/

HTML:

<div style="font:12px verdana;background:#fefcd9;padding:10px 10px 10px 10px;border:solid 1px lightgray;" >Instructions
    <span id="min" style="cursor:pointer;float:right;">[-]</span>
    <br/><br/>
    <div id="text">
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>
</div>​

JS:

$('#min').click(function(){
 $("#text").toggle(200);    
});​