SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show and Hide issue

    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.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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.

  3. #3
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.

  4. #4
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    No problem
    Thanks for taking the time to follow up.

  6. #6
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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>

  8. #8
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •