Show and Hide issue

**Zapppa** · Jan 10, 2013 10:23

Hello

I have a lot of text that I want to break up using a show and hide with Jquery. I have it working... but I want to hide the 'Read More' button when it is clicked.
Can someone please help me to do this ?

Here is my code:

Code:

<script type="text/javascript">

$(document).ready(function(){	
    $('.relay_info').hide().before('<a href="#" id="open-relay_info" class="button">Read More ↓</a>');
	$('.relay_info').append('<a href="#close-relay_info" id="close-relay_info" class="button">Close ↑</a>');
	$('a#open-relay_info').click(function() {
		$('.relay_info').slideDown(1000);
		return false;
	});
	
        $('a#close-relay_info').click(function() {
		$('.relay_info').slideUp(1000);
		return false;
	});

});

</script>

Any help would be much appreciated.

**Pullo** · Jan 10, 2013 15:25

Hi there Zapppa,

Would something like this work for you?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>slideToggle example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <div style="width:500px;">
      <p>The php.ini file is absolutely fascinating.</p>
      <a href="" class="readMore">Read more...</a>
      
      <div class="hiddenContent">
        <p>
          ; Output buffering allows you to send header lines (including cookies) even<br />
          ; after you send body content, at the price of slowing PHP's output layer a<br />
          ; bit. You can enable output buffering during runtime by calling the output<br />
          ; buffering functions. You can also enable output buffering for all files by<br />
          ; setting this directive to On. If you wish to limit the size of the buffer<br />
          ; to a certain size - you can use a maximum number of bytes instead of 'On', as<br />
          ; a value for this directive (e.g., output_buffering=4096).<br />
          output_buffering = Off
        </p>
      </div>
    </div>

    <script>
      $('.hiddenContent').hide();
      $('.readMore').click(function () {
        $('.hiddenContent').slideToggle('slow', function(){
          $('.readMore').text($(this).is(':visible')? 'Hide' : 'Read more...');
        })
        return false;
      });
    </script>
  </body>
</html>

If not, just let me know what I have misunderstood and I can help you modify it.

**Zapppa** · Jan 11, 2013 02:51

Originally Posted by Pullo

Hi there Zapppa,

Would something like this work for you?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>slideToggle example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <div style="width:500px;">
      <p>The php.ini file is absolutely fascinating.</p>
      <a href="" class="readMore">Read more...</a>
      
      <div class="hiddenContent">
        <p>
          ; Output buffering allows you to send header lines (including cookies) even<br />
          ; after you send body content, at the price of slowing PHP's output layer a<br />
          ; bit. You can enable output buffering during runtime by calling the output<br />
          ; buffering functions. You can also enable output buffering for all files by<br />
          ; setting this directive to On. If you wish to limit the size of the buffer<br />
          ; to a certain size - you can use a maximum number of bytes instead of 'On', as<br />
          ; a value for this directive (e.g., output_buffering=4096).<br />
          output_buffering = Off
        </p>
      </div>
    </div>

    <script>
      $('.hiddenContent').hide();
      $('.readMore').click(function () {
        $('.hiddenContent').slideToggle('slow', function(){
          $('.readMore').text($(this).is(':visible')? 'Hide' : 'Read more...');
        })
        return false;
      });
    </script>
  </body>
</html>

If not, just let me know what I have misunderstood and I can help you modify it.

Hi

Thanks a lot for your reply! Your code works well.

However, I am keen to style the read more and read less link with a CSS class to make it into a small button.

As the class name is taken up by Jquery how would I do this?

I tried to turn the button into an ID, but this didnt seem to work for me.

**Zapppa** · Jan 11, 2013 03:57

Apologies, this is sorted now, I just edited the readMore to a class thats also in my css.

i.e.

Code:

    <script>
      $('.hiddenContent').hide();
      $('.button').click(function () {
        $('.hiddenContent').slideToggle('slow', function(){
          $('.button').text($(this).is(':visible')? 'Hide' : 'Read More..');
        })
        return false;
      });
    </script>

Thank you for your help!

**Pullo** · Jan 11, 2013 04:46

No problem

Thanks for taking the time to follow up.

**Zapppa** · Jan 11, 2013 05:06

I have one small question.. If I want to do 3 of these on one page I seem to have to to make 3 separate buttons classes within CSS and call the script 3 times with slightly different names?

Is there an easy way to use the same CSS class for all of the links without having to rename each class every time? I noticed there are problems when I keep them the same, all get activated etc.

I realise the code calls the class but just wondering if there is an efficient way to resuse the CSS class code for all?

**Pullo** · Jan 11, 2013 05:29

Hi,

The best way to have more than one of these on the page, but not to have massive amounts of replication in your code would be to workj with jQuery's each() method.
As the elements with the classes "readMore" and "hiddenContent" are adjacent siblings, you can reference them using [samp]prev()[samp] and next().

Here's an example:

Code JavaScript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>slideToggle example - multiple divs</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
 
  <body>
    <div style="width:500px;">
      <p>The php.ini file is absolutely fascinating.</p>
      <a href="" class="readMore">Read more...</a>
      <div class="hiddenContent">
        <p>
          ; Output buffering allows you to send header lines (including cookies) even<br />
          ; after you send body content, at the price of slowing PHP's output layer a<br />
          ; bit. You can enable output buffering during runtime by calling the output
        </p>
      </div>
 
      <p>More nonsense about PHP</p>
      <a href="" class="readMore">Read more...</a>
      <div class="hiddenContent">
        <p>
          ; Output buffering allows you to send header lines (including cookies) even<br />
          ; after you send body content, at the price of slowing PHP's output layer a<br />
          ; bit. You can enable output buffering during runtime by calling the output
        </p>
      </div>
    </div>
 
    <script>
      $('.hiddenContent').hide();
        $('.readMore').each(function(){
          $(this).click(function () {
            $(this).next().slideToggle('slow', function(){
            $(this).prev().text($(this).is(':visible')? 'Hide' : 'Read more...');
          })
          return false;
        });
      });
    </script>
  </body>
</html>

**Zapppa** · Jan 11, 2013 05:32

Thanks!

User Tag List

Thread: Show and Hide issue

Thread Tools

Display

Show and Hide issue

Bookmarks

Bookmarks

Posting Permissions