Html Code: Animated collapse expand by Jquery

A very useful code for the website to show contents in the collapsed or expanded mode, so many space is saved in the page and the design of the page will be more beautiful.
This code and animation is written by html and Jquery and is very customizable.
<!-- this script got from www.htmlbestcodes.com - Coded by: Krishna Eydat -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var animatedcollapse = {
divholders: {}, //structure: {div.id, div.attrs, div.$divref, div.$togglerimage}
divgroups: {}, //structure: {groupname.count, groupname.lastactivedivid}
lastactiveingroup: {}, //structure: {lastactivediv.id}
preloadimages: [],

show: function (divids) { //public method
if (typeof divids == "object") {
for (var i = 0; i < divids.length; i++)
    this.showhide(divids[i], "show")
}
else
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")
}
else
this.showhide(divids, "hide")
},

toggle: function (divid) { //public method
if (typeof divid == "object")
divid = divid[0]
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
}
this.currentid = divid //keep track of current div object being manipulated (in the event of chaining)
return this
},

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
}
else {
    this.slideengine(divid, action)
}
}
},

slideengine: function (divid, action) {
var $divref = this.divholders[divid].$divref
var $togglerimage = this.divholders[divid].$togglerimage
if (this.divholders[divid] && $divref.length == 1) { //if this DIV exists
var animateSetting = { height: action }
if ($divref.attr('fade'))
    animateSetting.opacity = action
$divref.animate(animateSetting, $divref.attr('speed') ? parseInt($divref.attr('speed')) : 500, function () {
    if ($togglerimage) {
        $togglerimage.attr('src', ($divref.css('display') == "none") ? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
    }
    if (animatedcollapse.ontoggle) {
        try {
            animatedcollapse.ontoggle(jQuery, $divref.get(0), $divref.css('display'))
        }
        catch (e) {
            alert("An error exists inside your \"ontoggle\" function:\n\n" + e + "\n\nAborting execution of function.")
        }
    }
})
return false
}
},

generatemap: function () {
var map = {}
for (var i = 0; i < arguments.length; i++) {
if (arguments[i][1] != null) { //do not generate name/value pair if value is null
    map[arguments[i][0]] = arguments[i][1]
}
}
return map
},

init: function () {
var ac = this
jQuery(document).ready(function ($) {
animatedcollapse.ontoggle = animatedcollapse.ontoggle || null
var urlparamopenids = animatedcollapse.urlparamselect() //Get div ids that should be expanded based on the url (['div1','div2',etc])
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
this.$divref = $('#' + this.id)
if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist) != -1) && persistopenids != null) { //if this div carries a user "persist" setting, or belong to a group with at least one div that does
    var cssdisplay = (jQuery.inArray(this.id, persistopenids) != -1) ? 'block' : 'none'
}
else {
    var cssdisplay = this.getAttr('hide') ? 'none' : null
}
if (urlparamopenids[0] == "all" || jQuery.inArray(this.id, urlparamopenids) != -1) { //if url parameter string contains the single array element "all", or this div's ID
    cssdisplay = 'block' //set div to "block", overriding any other setting
}
else if (urlparamopenids[0] == "none") {
    cssdisplay = 'none' //set div to "none", overriding any other setting
}
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 (jQuery.inArray(this.id, urlparamopenids) != -1) { //if url parameter string contains this div's ID
        targetgroup.lastactivedivid = this.id //remember this DIV as the last "active" DIV (this DIV will be expanded). Overrides other settings
        targetgroup.overridepersist = 1 //Indicate to override persisted div that would have been expanded
    }
    if (!targetgroup.lastactivedivid && this.$divref.css('display') != 'none' || cssdisplay == "block" && typeof targetgroup.overridepersist == "undefined") //if this DIV was open by default or should be open due to persistence
        targetgroup.lastactivedivid = this.id //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 && urlparamopenids[0] != "none") //show last "active" DIV within each group (one that should be expanded), unless url param="none"
    ac.divholders[this.lastactivedivid].$divref.show()
})
if (animatedcollapse.ontoggle) {
jQuery.each(ac.divholders, function () { //loop through each collapsible DIV object and fire ontoggle event
    animatedcollapse.ontoggle(jQuery, this.$divref.get(0), this.$divref.css('display'))
})
}
//Parse page for links containing rel attribute
var $allcontrols = $('a[rel]').filter('[rel^="collapse["], [rel^="expand["], [rel^="toggle["]') //get all elements on page with rel="collapse[]", "expand[]" and "toggle[]"
$allcontrols.each(function () { //loop though each control link
this._divids = this.getAttribute('rel').replace(/(^\w+)|(\s+)/g, "").replace(/[\[\]']/g, "") //cache value 'div1,div2,etc' within identifier[div1,div2,etc]
if (this.getElementsByTagName('img').length == 1 && ac.divholders[this._divids]) { //if control is an image link that toggles a single DIV (must be one to one to update status image)
    animatedcollapse.preloadimage(this.getAttribute('data-openimage'), this.getAttribute('data-closedimage')) //preload control images (if defined)
    $togglerimage = $(this).find('img').eq(0).data('srcs', { open: this.getAttribute('data-openimage'), closed: this.getAttribute('data-closedimage') }) //remember open and closed images' paths
    ac.divholders[this._divids].$togglerimage = $(this).find('img').eq(0) //save reference to toggler image (to be updated inside slideengine()
    ac.divholders[this._divids].$togglerimage.attr('src', (ac.divholders[this._divids].$divref.css('display') == "none") ? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
}
$(this).click(function () { //assign click behavior to each control link
    var relattr = this.getAttribute('rel')
    var divids = (this._divids == "") ? [] : this._divids.split(',') //convert 'div1,div2,etc' to array
    if (divids.length > 0) {
        animatedcollapse[/expand/i.test(relattr) ? 'show' : /collapse/i.test(relattr) ? 'hide' : 'toggle'](divids) //call corresponding public function
        return false
    }
}) //end control.click
})// end control.each

$(window).bind('unload', function () {
ac.uninit()
})
}) //end doc.ready()
},

    uninit: function () {
    var opendivids = '', groupswithpersist = ''
    jQuery.each(this.divholders, function () {
    if (this.$divref.css('display') != 'none') {
        opendivids += this.id + ',' //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)
    },

    getCookie: function (Name) {
    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()
        expireDate.setDate(expireDate.getDate() + days)
        document.cookie = name + "=" + value + "; path=/; expires=" + expireDate.toGMTString()
    }
        else //else if this is a session only cookie
        document.cookie = name + "=" + value + "; path=/"
    },

    urlparamselect: function () {
    window.location.search.match(/expanddiv=([\w\-_,]+)/i) //search for expanddiv=divid or divid1,divid2,etc
    return (RegExp.$1 != "") ? RegExp.$1.split(",") : []
    },

    preloadimage: function () {
    var preloadimages = this.preloadimages
    for (var i = 0; i < arguments.length; i++) {
    if (arguments[i] && arguments[i].length > 0) {
        preloadimages[preloadimages.length] = new Image()
        preloadimages[preloadimages.length - 1].src = arguments[i]
    }
    }
    }

}
</script>

<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) {
}

animatedcollapse.init();
</script>

<b><a href="javascript:animatedcollapse.show(['jason', 'kelly', 'michael'])">Show Examples 1, 2, 3</a> | <a href="javascript:animatedcollapse.hide(['jason', 'kelly', 'michael'])">Hide Examples 1, 2, 3</a></b>
<p><b>Example 1 (individual):</b></p>
<a href="javascript:animatedcollapse.toggle('jason')"><img src="https://www.htmlbestcodes.com/files/slide913a.png" border="0" width="50" height="50" /></a> <a href="javascript:animatedcollapse.show('jason')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('jason')">Slide Up</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>
<p><b>Example 2 (individual):</b></p>
<a href="javascript:animatedcollapse.toggle('kelly')"><img src="https://www.htmlbestcodes.com/files/slide913a.png" border="0" /></a> <a href="javascript:animatedcollapse.show('kelly')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('kelly')">Slide Up</a>
<div id="kelly" style="width: 300px; background: #D2FBFF; display:none">
    <b>Content inside DIV!</b><br />
    <b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>
<p><b>Example 3 (individual):</b></p>
<a href="javascript:animatedcollapse.toggle('michael')"><img src="https://www.htmlbestcodes.com/files/slide913a.png" border="0" /></a> <a href="javascript:animatedcollapse.show('michael')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('michael')">Slide Up</a>
<div id="michael" style="width: 300px; background: #E7FFCC; display:none">
    <b>Content inside DIV!</b><br />
    <b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>
<hr style="margin: 1em 0" />
<p><b>Example 4 (part of group "pets"):</b></p>
<a href="#" rel="toggle[cat]" data-openimage="https://www.htmlbestcodes.com/files/slide913b.jpg" data-closedimage="https://www.htmlbestcodes.com/files/slide913a.png"><img src="https://www.htmlbestcodes.com/files/slide913b.jpg" border="0" border="0" width="50" height="50" /></a> <a href="javascript:animatedcollapse.show('cat')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cat')">Slide Up</a>
<div id="cat" style="width: 400px; background: #BDF381;">
    The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>
<p><b>Example 5 (part of group "pets"):</b></p>
<a href="#" rel="toggle[dog]" data-openimage="https://www.htmlbestcodes.com/files/slide913b.jpg" data-closedimage="https://www.htmlbestcodes.com/files/slide913a.png"><img src="https://www.htmlbestcodes.com/files/slide913b.jpg" border="0" border="0" width="50" height="50" /></a> <a href="javascript:animatedcollapse.show('dog')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('dog')">Slide Up</a>
<div id="dog" style="width: 400px; background: #BDF381;">
    The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.
</div>
<p><b>Example 6 (part of group "pets"):</b></p>
<a href="#" rel="toggle[rabbit]" data-openimage="https://www.htmlbestcodes.com/files/slide913b.jpg" data-closedimage="https://www.htmlbestcodes.com/files/slide913a.png"><img src="https://www.htmlbestcodes.com/files/slide913b.jpg" border="0" border="0" width="50" height="50" /></a> <a href="javascript:animatedcollapse.show('rabbit')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('rabbit')">Slide Up</a>
<div id="rabbit" style="width: 400px; background: #BDF381">
    Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.
</div>
<br />
<a target="_blank" href="https://www.htmlbestcodes.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">HTML Best Codes</a>
If you don't know how to use this code or need more information Click here!
Compatible browsers:
Html Best Codes

Html Code: Animated collapse expand by Jquery

Links
