Help needed with show / hide text

[Zola]

Hi 

 

I have a lot of text in a few sections for one page. I want to use a show / hide to expand and close the extended detailed if the user wants to read more.

 

At the moment I have a solution, the open link appears in the middle of the text where I want it, but when the user clicks to extend the text, the link stays in the same place..... I would like it to appear at the bottom of the extended text.

 

I am not sure how to change this. Do you have any ideas?

 

Any help would be much appreciated.

 

Here is my current code

 

 

<h1 id="headline">Headliner</h1>

 

<p>opening paragraphs....</p>

 

 <a href="" class="readmore">Read More..</a>

 

<div class="hiddenContent">

 

           <p>Extended content when the user clicks.</p>    

  

  </div>   <!-- /hiddenContent-->    

     

 <script>

      $('.hiddenContent').hide();

      $('.readmore').click(function () {

        $('.hiddenContent').slideToggle('slow', function(){

          $('.readmore').text($(this).is(':visible')? 'Close' : 'Read More..');

        })

        return false;

      });

    </script>

                 

[Zola]

Got sorted with this!

 

   <script>

 $(document).ready(function() {

$('.hidden_software').hide().before('<a href="#" id="open-hidden_software" class="link">Read More ↓</a>');

$('.hidden_software').append('<a href="#" id="close-hidden_software" class="link">Close ↑</a>');

$('a#open-hidden_software').click(function() {

$('.hidden_software').slideDown(1000);

$('#open-hidden_software').fadeOut(500);

return false;

});

$('a#close-hidden_software').click(function() {

$('.hidden_software').slideUp(1000);

$('#open-hidden_software').fadeIn(500)

return false;

});

 

[cyberRobot]

I have marked the topic as solved. If you need anything else, please mark it as unsolved...or start a new topic.