www.webdeveloper.com
Results 1 to 2 of 2

Thread: Lists

  1. #1
    Join Date
    Oct 2011
    Posts
    1

    Lists

    I really like the way they manage lists on Lynda.com site. Is that done just in JavaScript or with something like jQuery? How can I replicate it?

    For example, on http://www.lynda.com/Rhino-4-tutoria...g/59223-2.html you can click on the arrow and it will hide/reveal the contents inside. It would be better if it did a fade too, Any ideas?

  2. #2
    Join Date
    May 2009
    Posts
    46
    It's done with Javascript or you could use JQuery too. JQuery is just a Javascript library. I like JQuery, it saves a lot of time.

    You can do something like this:

    Code:
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    	$(function(){
    		$("#target").hide();
    		
    		$(".arrow").click(function(){
    			$(this).toggleClass('open_arrow closed_arrow');
    			$("#target").toggle();
    		});
    	});
    </script>
    </head>
    
    <body>
    	<a href='#' class='arrow closed_arrow'>Click Me</a>
        
        <div id='target'>
        	<p>This is the target of the arrow</p>
      	</div>
    </body>
    </html>
    This starts with the target hidden. If you want to start with it visible, just remove the $("#target").hide();

    Obviously, you're going to want to change the "click me" to an arrow using the classes 'open_arrow' and 'closed_arrow' appropriately.

    Hope that helps!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles