Jump to content


Photo

Help needed with show / hide text


Best Answer Zola, 04 October 2013 - 04:42 AM

Got sorted with this!
 
   <script>
 $(document).ready(function() {
$('.hidden_software').hide().before('<a href="#" id="open-hidden_software" class="link">Read More &darr;</a>');
$('.hidden_software').append('<a href="#" id="close-hidden_software" class="link">Close &uarr;</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;
});
 
Go to the full post


  • Please log in to reply
2 replies to this topic

#1 Zola

Zola

    Advanced Member

  • Members
  • PipPipPip
  • 60 posts

Posted 04 October 2013 - 04:07 AM

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>
                 


#2 Zola

Zola

    Advanced Member

  • Members
  • PipPipPip
  • 60 posts

Posted 04 October 2013 - 04:42 AM   Best Answer

Got sorted with this!
 
   <script>
 $(document).ready(function() {
$('.hidden_software').hide().before('<a href="#" id="open-hidden_software" class="link">Read More &darr;</a>');
$('.hidden_software').append('<a href="#" id="close-hidden_software" class="link">Close &uarr;</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;
});
 


#3 cyberRobot

cyberRobot

    Advanced Member

  • Gurus
  • 1,413 posts

Posted 04 October 2013 - 07:34 AM

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


Blogging about PHP and other web development topics at ScorpBytes.com




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com