Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    46
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Expand contract script that toggles Hide/Show

    I recently went through the process of finding and customizing some javascript to allow text blocks to be able to be split up to expand and contract on my page. The code is below, the sample page is here http://www.infolists.com/Arts/Painting/000000000128.php

    It works great, the only problem is I can't for the life of me figure out how I can use this script to either A. change the word "More" to "Less" or make the word disappear after a click.

    Either option would be fine, but i hate that the word "More" continues to show for a list item even after the layer has been clicked.

    Unfortunately, I'm good with PHP, decent with design, but not proficient in javascript. Can anyone tell me if there is a simple change I can make to this code to make this change:

    Code:
        <script type="text/javascript">
         $(document).ready(function() {
    	 $('div.itemContent').hide();
    	 $('div.itemHeader').toggle(function() {
    	 $(this).siblings('div.itemContent').fadeIn('fast');
    	 }, function() {
    	 $(this).siblings('div.itemContent').fadeOut('fast');
    	 return false;
    	});
    	});</script>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    $(document).ready(function() {
      $('div.itemContent').hide();
      $('div.itemHeader').toggle(function() {
        $(this).siblings('div.itemContent').fadeIn('fast');
        $(this).text('[Less]');
      }, function() {
        $(this).siblings('div.itemContent').fadeOut('fast');
        $(this).text('[More]');
        return false;
      });
    });
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    kwdamp (07-29-2013)

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    46
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Thanks for the input Glen.

    Adding that code does make the toggle work correctly. Unfortunately, the way I have it coded (with a sample line showing first), it causes the script to stop working correctly.

    This is the actual list item code. What needs to change for this to work correctly given your changes to the javascript:

    Code:
    <ul><li>Cheap Joe’s
    <div class="itemContent"><br>Located in Boone, NC (outlet store)
    <br>Offers quality professional to student grade art supplies
    <br><br><a href="http://www.cheapjoes.com" style="color: #0000FF">http://www.cheapjoes.com</a>
    <br></div>
    						<div class="itemHeader">[More]</div>
    						</li>

  • #4
    New Coder
    Join Date
    Jun 2011
    Posts
    46
    Thanks
    1
    Thanked 2 Times in 2 Posts
    I stand corrected, it works perfectly. The template I originally tried the change in was old and had another error.

    Thanks for the help Glen!


  •  

    Posting Permissions

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