read more option with accordion or anything else

Question

I'm trying to have "read more" options; when you click on it, it shows more text and again you have the "read more" option at the bottom of the new text and then when you click on the, new text appends to it; I hope it makes sense what Im saying

111111
111111
+

whan you click on + it shows:

111111
111111
222222
222222
+

again when you click on + it shows:

111111
111111
222222
222222
333333
333333
+

and so on...

Not sure if it can be done by accordion or not:

here is my attempt without success

Thanks

Answer 1

Try to have a separate .accordion for every plus sign:

updated fiddle

<div id="content">
    <p>11111111111111111111111111111111111 11111111111111111111111 11111111111111111 111111111111111111111 111111111111111111111111111111111111</p>
    <div class="accordion">
        <h3>+</h3>
        <p> 2222222222222222222222222222  2222222222222222222222222222 2222222222222222222222 222222</p>
    </div>
    <div class="accordion">
        <h3>+</h3>
        <p> 333333333333 333333333 33333333333333333333333333333 33333333333333333 33333 3333333333 3333333333333 33333333333333333333333</p>
    </div>
</div>

Answer 2

I don't know if it's what you want but I change accordeon to a standard slide : http://jsfiddle.net/cDQ32/49/

HTML :

<div id="content">
    <p>11111111111111111111111111111111111 11111111111111111111111 11111111111111111 111111111111111111111 111111111111111111111111111111111111</p>
    <div class="accordion">
        <h3 id="btn1">+</h3>
        <p> 2222222222222222222222222222  2222222222222222222222222222 2222222222222222222222 222222
        </p>
        <h3 id="btn2">+</h3>
        <p> 333333333333 333333333 33333333333333333333333333333 33333333333333333 33333 3333333333 3333333333333 33333333333333333333333</p>
    </div>
</div>

JS :

$('#btn1 + p').hide();
$('#btn2 + p').hide();
$('#btn1').click(function(){
    $('#btn1 + p').slideToggle();    
});
$('#btn2').click(function(){
    $('#btn2 + p').slideToggle();    
});

Answer 3

An accordion is only meant to show one item at a time. If you would like to show multiple elements, you should be using something else.

To take an example from jQuery UI accordion that keeps multiple sections open?

$('.accordion h3').click(function() {
    $(this).next().toggle('slow');
    $(this).remove();
    return false;
}).next().hide();

http://jsfiddle.net/d9ybC/

While multiple accordions may work, it's using the wrong tool for the job and has a bit of a smell to it.