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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do you make the "add a result" button google uses? is that CSS? Java? Ajax?

    It's the effect where you click on a link or a button and a new bit of content appears, pushing down everything below it. Clicking it again makes that content disappear and all the original text move back up. Google uses it in a number of places, notably at the bottom of any search result. For example: http://www.google.com/search?q=anything

    At the very bottom, below the "Goooogle" page number thing, there's a little plus sign to the left of "Add a result". Clicking that makes new content appear. I see it in a lot of places and I love the effect! I don't know if its Ajax or CSS or whatever, so I don't know how to properly search for a tutorial, but could anyone point me in the right direction?

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    one way this can be achieved is using jquery and a combination of hide/show or toggle..

    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    $("a.add-more").live("click", function() {
    	$('#add-more-box').toggle("slow");
    });
    </script>
    if you include the jquery library, and use this markup

    Code:
    /* CSS Style */
    #add-more-box { display:hidden; width:200px; height:50px; padding:5px; border:1px solid #000; background-color:#c4c4c4; }
    
    /* html */
    <a class="add-more" href="#">Click to add more</a>
    <div id="add-more-box">
     some content that will appear 
    </div>
    this is just a very very basic example but with the necessary knowledge you can accomplish an effect similar to googles.

    http://docs.jquery.com/Main_Page
    Last edited by met; 11-08-2009 at 08:52 PM. Reason: corrections


  •  

    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
    •