SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,642
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    open divs using a button/link

    I have a simple form in a div...
    On The Ocean: Edit Rates
    Is there any way to achieve an effect somewhat like
    Harry Maugans How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS
    Except Id like to be able to click the same link to open about 12 of the same forms below it (Each time I click the link, a duplicate form would appear below the above form but above the link so it can be clicked again).
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use jQuery, because it is super easy to do stuff like collapsing and opening a div, plus I haven't had enough time to become a javascript guru, so I need to lean on jQuery to get things done. If you're not opposed to using jQuery, then your simple javascript to hide/show your div is like this:

    Code JavaScript:
    //div hidden at initial pageload. div has CSS id of #my-div
    $('div#my-div').hide();
     
    // I use a dummy link to open/close #my-div.
    $('#my-link').click(function(event){
     
    	// Do not follow the link
    	event.preventDefault();
     
    	// If the link text is 'See Stuff in #my-div'
    	if( $(this).text() == 'See Stuff in #my-div' ){
     
    		// Show the details
    		$(this).parent().next().fadeIn(750);
     
    		// Change the link text to 'Hide Stuff in #my-div'
    		$(this).text('Hide Stuff in #my-div');
     
    	// If the link text is 'Hide Stuff in #my-div'
    	} else {
     
    		// Hide the details
    		$(this).parent().next().fadeOut(750);
     
    		// Change the link text to 'See Stuff in #my-div'
    		$(this).text('See Stuff in #my-div');
     
    	}
     
    });

    That's really all there is to it. You will need to call jquery before adding this code to your page, and you will need something like the following HTML to make this work:

    Code HTML4Strict:
    <div>
         <a id="my-link">See Stuff in #my-div</div>
    </div>
    <div id="my-div">
         <p>This paragraph contains information</p>
    </div>

  3. #3
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,642
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    thanks...
    "Oh, and Jenkins--apparently your mother died this morning."

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    This is no reflection on you skunkbad but your code to me is redundant and can be shortened down quite a bit, please see the fiddle link below for how i would achieve this.

    Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

  5. #5
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    This is no reflection on you skunkbad but your code to me is redundant and can be shortened down quite a bit, please see the fiddle link below for how i would achieve this.

    Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
    SgtLegend, I do appreciate your suggested code. Even though I've used jQuery a bit, I do not consider myself a professional user of it or javascript, so even if you were reflecting on me, it would be a well deserved reflection.


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
  •