Results 1 to 7 of 7

Thread: Animated Collapsible DIV, toggle, border A element instead of swapping image

  1. #1
    Join Date
    Jul 2010
    Location
    Bridport, Dorset
    Posts
    58
    Thanks
    6
    Thanked 1 Time in 1 Post

    Question Animated Collapsible DIV, toggle, border A element instead of swapping image

    1) Script Title:
    Animated Collapsible DIV v2.4

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...edcollapse.htm

    3) Describe problem:
    Hi, Thanks for an awesome script as always.
    I am implementing it on a revamp of my website. Viewable here: (http://www.touch.steptoes.co.uk/index.html) Not live to the public though.

    What I would like is for the section that has been toggled then has a blue border around the text link/button at the top, the same as the hover state.
    It is the | Search | Brands | Categories | Contact Us | section in the header

    So in effect make the border stick when it is toggled on, then dissappear when it is de-toggled.

    This is what makes the border appear on hover:
    Code:
    #subheader a{display:block;text-decoration:none;border:1px solid #FFF;padding:6px;}
    #subheader a:hover{border:1px solid #2A3791;}
    Can the script effect or change the #subheader a element during its DIV expanding function?

    Thanks for your time.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,911
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    You can use the ontoggle event handler of the script to detect whenever a content has been expanded, then based on the ID of that content to reference the anchor link that toggled it. Then, add a class of "selected" to it to persist the hover state style while removing any selected class that may have been added to its peer anchor links previously. With all that in mind, do the following:

    1) Extend your CSS to include a selected class:

    Code:
    #subheader a:hover, #subheader a.selected{border:1px solid #2A3791;}
    2) Then, extend the initialization code for Animated DIV with the parts in red:

    Code:
    animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
    	//$: Access to jQuery
    	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
    	//state: "block" or "none", depending on state
    	if (state=="block"){
    		var $anchor=$navlinks.filter('a[rel="toggle[' + divobj.id +']"]') //find link that toggled expanded content within nav UL
    		if ($anchor.length==1){
    			$navlinks.removeClass('selected')
    			$anchor.addClass('selected')
    		}
    	}
    }
    
    jQuery(function($){
    	$navlinks=$('ul#navileft li a[rel]') //reference links within navileft
    })
    
    animatedcollapse.init()
    That should do it.
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    lilpete (11-21-2011)

  4. #3
    Join Date
    Jul 2010
    Location
    Bridport, Dorset
    Posts
    58
    Thanks
    6
    Thanked 1 Time in 1 Post

    Default

    Thank You!!
    I knew the toggle function would be the key, but it broke every time I tried to edit it.

    It works, but there is a split second where the border does not appear, between the hover and selected states.. but I can live with that.
    I have edited the linked to site now so you can see the result.

    Again! Thanks for your time! Much appreciated.

  5. #4
    Join Date
    Jul 2010
    Location
    Bridport, Dorset
    Posts
    58
    Thanks
    6
    Thanked 1 Time in 1 Post

    Exclamation Animated Collapsible DIV, toggle, border A element instead of swapping image

    Hi,

    Sorry, but there is a part of the functionality that is not quite right.

    It does not toggle off.. the border comes on when clicked, and can switch between them, but when clicked to toggle off a div the border stays.

    Im sure a little tweak to your code would do it, but I cant see it myself.

    Best Regards,

  6. #5
    Join Date
    Jul 2010
    Location
    Bridport, Dorset
    Posts
    58
    Thanks
    6
    Thanked 1 Time in 1 Post

    Default

    Its ok, I have sussed it with my basic knowledge of JS...

    Code:
    animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
    	//$: Access to jQuery
    	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
    	//state: "block" or "none", depending on state
    	if (state=="block"){
    		var $anchor=$navlinks.filter('a[rel="toggle[' + divobj.id +']"]') //find link that toggled expanded content within nav UL
    		if ($anchor.length==1){
    			$navlinks.removeClass('selected')
    			$anchor.addClass('selected')
    		}
    			
    	}
    	else {$navlinks.removeClass('selected')}
    }
    
    jQuery(function($){
    	$navlinks=$('ul#navileft li a[rel]') //reference links within navileft
    })
    
    animatedcollapse.init()

  7. #6
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Same effect but w/ div not UL

    Hi, this is exactly what I'm looking for but I'm using divs. So I have a thumb that when I roll over the the border changes due to the hover pseudo class, but I want the border to stay white when the div has been toggled to open. I just couldn't get the code modified no matter what I tried.

  8. #7
    Join Date
    Aug 2004
    Posts
    9,911
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    loriensleafs, what does the markup for each of your thumbnails look like?
    DD Admin

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
  •