Show and Hide issue

JavaScript
1

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:

<script type="text/javascript">

$(document).ready(function(){	
    $('.relay_info').hide().before('<a href="#" id="open-relay_info" class="button">Read More &#8595;</a>');
	$('.relay_info').append('<a href="#close-relay_info" id="close-relay_info" class="button">Close &#8593;</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.

2

Hi there Zapppa,

Would something like this work for you?

<!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.

3

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.

4

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

i.e.


    <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!

5

No problem :slight_smile:
Thanks for taking the time to follow up.

6

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?

7

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 prev() and next().

Here’s an example:

<!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>
8

Thanks!