JavaScript expanding Collapsing sections or paragraphs

Posted on 2008-11-06
Last Modified: 2013-12-25
I need to make this attached code below expand and collapse when the title is clicked, as of right now it expands when the title is clicked and it collapses when close is clicked. I have recieved this code that makes it do both, but I am not sure where it is suppose to go in the JavaScript file.

function toggleMe(a){
  var e=document.getElementById(a);
  if(!e)return true;
  } else {"none"
  return true;

below is the javascrpit that works now just doesnt collapse when the title is clicked on

//** Animated Collapsible DIV v2.0- (c) Dynamic Drive DHTML code library:

//** May 24th, 08'- Script rewritten and updated to 2.0.

//** June 4th, 08'- Version 2.01: Bug fix to work with jquery 1.2.6 (which changed the way attr() behaves).

var animatedcollapse={

divholders: {}, //structure: {, div.attrs, div.$divref}

divgroups: {}, //structure: {groupname.count, groupname.lastactivedivid}

lastactiveingroup: {}, //structure: {}

show:function(divids){ //public method

	if (typeof divids=="object"){

		for (var i=0; i<divids.length; i++)

			this.showhide(divids[i], "show")



		this.showhide(divids, "show")


hide:function(divids){ //public method

	if (typeof divids=="object"){

		for (var i=0; i<divids.length; i++)

			this.showhide(divids[i], "hide")



		this.showhide(divids, "hide")


toggle:function(divid){ //public method

	this.showhide(divid, "toggle")


addDiv:function(divid, attrstring){ //public function

	this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring})

	this.divholders[divid].getAttr=function(name){ //assign getAttr() function to each divholder object

		var attr=new RegExp(name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)

		return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp.$1 : null //return value portion (string), or 0 (false) if none found



showhide:function(divid, action){

	var $divref=this.divholders[divid].$divref //reference collapsible DIV

	if (this.divholders[divid] && $divref.length==1){ //if DIV exists

		var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)

		if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group

			if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set

				this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first

				this.slideengine(divid, 'show')

			targetgroup.lastactivedivid=divid //remember last active DIV



			this.slideengine(divid, action)




slideengine:function(divid, action){

	var $divref=this.divholders[divid].$divref

	if (this.divholders[divid] && $divref.length==1){ //if this DIV exists

		var animateSetting={height: action}

		if ($divref.attr('fade'))


		$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500)

		return false




	var map={}

	for (var i=0; i<arguments.length; i++){

		if (arguments[i][1]!=null){




	return map



	var ac=this


		var persistopenids=ac.getCookie('acopendivids') //Get list of div ids that should be expanded due to persistence ('div1,div2,etc')

		var groupswithpersist=ac.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined

		if (persistopenids!=null) //if cookie isn't null (is null if first time page loads, and cookie hasnt been set yet)

			persistopenids=(persistopenids=='nada')? [] : persistopenids.split(',') //if no divs are persisted, set to empty array, else, array of div ids

		groupswithpersist=(groupswithpersist==null || groupswithpersist=='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that are persisted

		jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object


			if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){

				var cssdisplay=(jQuery.inArray(, persistopenids)!=-1)? 'block' : 'none'



				var cssdisplay=this.getAttr('hide')? 'none' : null


			this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay]))

			this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')]))

			if (this.getAttr('group')){ //if this DIV has the "group" attr defined

				var targetgroup=ac.divgroups[this.getAttr('group')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, or if it no settings exist yet, create blank object to store them in

				targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group

				if (!targetgroup.lastactivedivid && this.$divref.css('display')!='none' || cssdisplay=="block") //if this DIV was open by default or should be open due to persistence					 //remember this DIV as the last "active" DIV (this DIV will be expanded)

				this.$divref.css({display:'none'}) //hide any DIV that's part of said group for now


		}) //end divholders.each

		jQuery.each(ac.divgroups, function(){ //loop through each group

			if (this.lastactivedivid)

				ac.divholders[this.lastactivedivid].$ //and show last "active" DIV within each group (one that should be expanded)


		var $allcontrols=$('*[rel]').filter('[@rel^="collapse-"], [@rel^="expand-"], [@rel^="toggle-"]') //get all elements on page with rel="collapse-", "expand-" and "toggle-"

		var controlidentifiers=/(collapse-)|(expand-)|(toggle-)/



				var relattr=this.getAttribute('rel')

				var divid=relattr.replace(controlidentifiers, '')

				var doaction=(relattr.indexOf("collapse-")!=-1)? "hide" : (relattr.indexOf("expand-")!=-1)? "show" : "toggle"

				return ac.showhide(divid, doaction)

			}) //end

		})// end control.each

		$(window).bind('unload', function(){



	}) //end doc.ready()



	var opendivids='', groupswithpersist=''

	jQuery.each(this.divholders, function(){

		if (this.$divref.css('display')!='none'){',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc'


		if (this.getAttr('group') && this.getAttr('persist'))

			groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'


	opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '')

	groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '')

	this.setCookie('acopendivids', opendivids)

	this.setCookie('acgroupswithpersist', groupswithpersist)



	var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair

	if (document.cookie.match(re)) //if cookie found

		return document.cookie.match(re)[0].split("=")[1] //return its value

	return null


setCookie:function(name, value, days){

	if (typeof days!="undefined"){ //if set persistent cookie

		var expireDate = new Date()


		document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()


	else //else if this is a session only cookie

		document.cookie = name+"="+value+"; path=/"



Open in new window

Question by:mikeregas
    LVL 75

    Accepted Solution

    Seems to me you just need to give an id of collapse-something

    Author Comment

    Thank you all I had to do was change the in the HTML code 'show' to 'toggle' and that solved my problem. Now they do both

    Featured Post

    Course: HTML5 Specialist

    HTML5 development skills are critical to all developers. HTML5 is the foundation to almost any development process. That's why business, design studios, development shops and other organizations need HTML5 developers. Get your foot in the door as a HTML5 specialist.

    Join & Write a Comment

    Problem to be resolved in this article Currently, development of website and web application can be done without writing thousands of lines of programming code by hand. Description This can be done through by using a open source framework such …
    The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
    Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
    The viewer will learn how to count occurrences of each item in an array.

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now