Results 1 to 2 of 2

Thread: How Can i add "Minus" and "Plus" to the Animated Collapsible DIV v2.2?

  1. #1
    Join Date
    Sep 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How Can i add "Minus" and "Plus" to the Animated Collapsible DIV v2.2?

    1) Script Title:
    Animated Collapsible DIV v2.2
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...edcollapse.htm
    3) Describe problem:
    I want to add "+" and "-" to the animated collapsible. Can anyone explain how can i add it?

  2. #2
    Join Date
    Aug 2004
    Posts
    9,878
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

    You'll need to utilize the ontoggle() event handler to expand the default behavior with this. There are a few ways to go about it, but one of it is first to give your toggler link(s) a unique ID in the form of divd plus "-toggler":

    Code:
    <a href="javascript:animatedcollapse.toggle('jason')" id="jason-toggler">Toggle Jason Content</a>
    
    <div id="jason" style="width: 300px; background: #FFFFCC; display:none">
    <b>Content inside DIV!</b><br />
    <b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
    </div>
    Then up in your initialization code, define the ontoggle() event handler as follows:

    Code:
    <script type="text/javascript">
    
    animatedcollapse.addDiv('jason', 'fade=1,height=80px')
    animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
    animatedcollapse.addDiv('michael', 'fade=1,height=120px')
    
    animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
    animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
    animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
    
    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 ($('#'+divobj.id+'-toggler').length==1){ //if toggler link has id 'divid-toggler' defined
    		if (state=="block")
    			$('#'+divobj.id+'-toggler').prepend('<span class="prefix">+ </span>')
    		else
    			$('#'+divobj.id+'-toggler').find('span.prefix').remove()
    	}
    }
    
    animatedcollapse.init()
    
    </script>
    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
  •