SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show content on click

    I am looking for a way to make a bulltet list only show after the header is clicked.

    example: Web Hosting Package Comparison from Network Solutions

    If you click the feature you get the details. I am trying to do something of this aspect on my site, under the "email marketing" section.

    I would like to only see the bullets when the headers are clicked. (ie. create and send, manage lists, etc....)

    http://www.mymarketingsolutions.com/...marketing.html

    Thanks in advance.

  2. #2
    SitePoint Zealot zbing's Avatar
    Join Date
    Jun 2002
    Location
    Lisbon, Portugal
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This should work.

    It uses the PrototypeJS library.
    Read to code comments for detailed explanation.

    1. I used PrototypeJS to get an array of the elements using the css .clickable class;
    2. On each iteration over the said array and attach click events to each one to toggle the visibility of its sibling, the ul element.

    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
       .clickable { cursor: hand; cursor: pointer;  }
       .clickable:hover { color: red;  }
    </style>
    </head>
    <body>
    <h1>E-Mail Marketing</h1>
    <h2 class="clickable">Create and send eye catching emails</h2>
    <ul style="display: none;">
      <li> Design your own or have us help you design effective, eye-catching emails
        </p>
      </li>
      <li> Personalized email messages
        </p>
      </li>
      <li> Schedule release date and time
        </p>
      </li>
      <li> Only YOUR name is shown on the entire message.
        </p>
      </li>
      <li> We are invisible to your recipient.
        </p>
      </li>
      <li> WE DO IT FOR YOU…freeing up your time to be more productive
        </p>
      </li>
      <li> Manage Lists     and Subscribers
        </p>
      </li>
    </ul>
    <h2 class="clickable">Client Management</h2>
    <ul style="display: none;">
      <li> Signup Forms - Subscription management
        Custom Fields - Add more personalization </li>
      <li> Suppression Lists
        </p>
      </li>
      <li> Flexible importing and exporting
        </p>
      </li>
    </ul>
    <h2 class="clickable">Powerful Analytics</h2>
    <ul style="display: none;">
      <li>Real-time Reporting - Activity timeline </li>
      <li>Google Analytics </li>
      <li>Forward to a friend </li>
      <li>Compare Campaigns - Spot trends </li>
      <li>Open and Click Through Tracking </li>
    </ul>
    <h2 class="clickable">Affordable    Pricing </h2>
    <ul style="display: none;">
      <li>$10.00 per campaign + $.03 each recipient </li>
      <li>Volume discounts</li>
    </ul>
    <!-- load prototype js library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
    <script type="text/javascript">
    	/* get an array of every element with the .clickable class */
    	var links = $$('.clickable');
    	/* iterate over the previous array */
    	links.each(function(l){
    		/* attach a click event to each element */
    		Event.observe(l,'click',function(e){
    			/* stop event propagation */
    			Event.stop(e);
    			/* toggle array element sibling visibility */
    			l.next().toggle();
    		});
    	});
    </script>
    </body>
    </html>
    zbing

  3. #3
    SitePoint Zealot zbing's Avatar
    Join Date
    Jun 2002
    Location
    Lisbon, Portugal
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This code should work with your markup structure:

    Code:
    <!-- load prototype js library --> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script> 
    <script type="text/javascript">
    	/* get an array of every h3 element inside a div */
    	var links = $$('div h3');
    	/* iterate over the previous array */
    	links.each(function(l){
    		l.className = 'clickable';
    		console.log(l);
    		/* attach a click event to each element */
    		Event.observe(l,'click',function(e){
    			/* stop event propagation */
    			Event.stop(e);
    			/* toggle array element's parent sibling visibility - how confusing is this... */
    			console.log(l.up().next().toggle());
    		});
    	});
    </script>
    zbing

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you.. but I have made the changes and the click works - but on load the lists are still showing.

  5. #5
    SitePoint Zealot zbing's Avatar
    Join Date
    Jun 2002
    Location
    Lisbon, Portugal
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    EDIT! Sorry I made a mistake!

    After:
    Code:
       links.each(function(l){
    Add:
    Code:
       l.next().hide();
    This will set the lists to display none, only if javascript is active as it should.
    zbing

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now the elements do not hide, and are not clickable.

  7. #7
    SitePoint Zealot zbing's Avatar
    Join Date
    Jun 2002
    Location
    Lisbon, Portugal
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Read my post edit please.
    zbing

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome - works Great thank you...

    Now to just figure the best way to make sure the user knows to click these for full details.

  9. #9
    SitePoint Zealot zbing's Avatar
    Join Date
    Jun 2002
    Location
    Lisbon, Portugal
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You already have the hand cursor indication but if necessary you can add extra visual feedback by styling the :hover state of the clickable elements:

    Code:
    .clickable:hover { color: #f00; }
    This will turn the text color to red when the mouse is over the clickable elements.
    zbing

  10. #10
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    What is all this JavaScript talk in the CSS forum?

    Could you use a CSS only version like this: http://feelerdealer.com/chooseOne.html

  11. #11
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    u almost made me happy imaginekitty, because i was looking for such a thing but unfortunately, it doesnt work in some browsers (checked on IE8 and below, didnt work)

  12. #12
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If someone gets that css only version to work in Internet Destroyer, please tell me
    Works awesome in any other browser.


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
  •