Collapsible plugin

Developer
Myron Schippers
Size
3,183 Kb
Views
36,432
  1. Collapsible plugin Previews
  2. Collapsible plugin HTML Codes
  3. Collapsible plugin CSS Codes
  4. Collapsible plugin JS Codes

How do I make an collapsible plugin?

Target a collapsible indicator inside of a heading. It will automatically expand and collapse the adjacent sibling of that heading. . What is a collapsible plugin? How do you make a collapsible plugin? This script and codes were developed by Myron Schippers on 15 September 2022, Thursday.

Collapsible plugin Previews
IQ Test

Collapsible plugin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>collapsible plugin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="filter-cont">
<div class="filterGroup"> <div class="filterGroup-heading"> Make: <div class="filterGroup-heading-ind js-collapse"> + </div> </div> <div class="filterGroup-exp"> <div class="filterGroup-exp-cont"> <ul> <li> <input class="Make Ford" type="checkbox" /> Ford(469) </li> <li> <input class="Make Ford" type="checkbox" /> Option (469) </li> <li> <input class="Make Ford" type="checkbox" /> Another Option (469) </li> </ul> </div> </div>
</div>
<div class="filterGroup"> <div class="filterGroup-heading"> Another Group: <div class="filterGroup-heading-ind js-collapse"> + </div> </div> <div class="filterGroup-exp"> <div class="filterGroup-exp-cont"> <ul> <li> <input class="Make Ford" type="checkbox" /> Ford(469) </li> <li> <input class="Make Ford" type="checkbox" /> Option (469) </li> <li> <input class="Make Ford" type="checkbox" /> Another Option (469) </li> </ul> </div> </div>
</div>
<div class="filterGroup"> <div class="filterGroup-heading"> Yet Another Group: <div class="filterGroup-heading-ind js-collapse"> + </div> </div> <div class="filterGroup-exp"> <div class="filterGroup-exp-cont"> <p>Oh look, paragraph content. I didn't know there could be words here. That's spectacular. Look at me I have words. But do I know how to use them?</p> </div> </div>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Collapsible plugin - Script Codes CSS Codes

*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body { background: #eeeeee; font: normal 16px/1 Helvetica, Arial, sans-serif;
}
/* --------------------------------------
Resets
----------------------------------------- */
ul { padding: 0px; margin: 0px; list-style: none;
}
p { margin: 0; line-height: 1.2;
}
/* --------------------------------------
Filter Group
----------------------------------------- */
.filterGroup { overflow: hidden; width: 300px; padding: 0; margin: 0 0 10px; background-color: #252627; border-radius: 5px;
}
.filterGroup-heading { padding: 6px 10px; margin: 0; border-bottom: 1px solid #111111; background-color: #4f4f4f; border-radius: 5px 5px 0 0; color: #111111; font-weight: bold; text-shadow: 0 1px 0 #777777;
}
.filterGroup-exp { color: #79aa8a;
}
.filterGroup-exp-cont { padding: 10px 10px 15px;
}
.filterGroup-heading-ind { float: right; display: block; width: 16px; height: 16px; background: #333333; box-shadow: 0 1px 1px #999999, inset 0 1px 1px #111111; border-radius: 100%; color: #cccccc; font-weight: normal; text-align: center;
}
*:hover > .filterGroup-heading-ind,
.filterGroup-heading-ind:hover { background: #8c1f0a;
}

Collapsible plugin - Script Codes JS Codes

/******************************************** Myron Schippers - collapseIT plugin last modified: 04/20/2013
********************************************/
//collapseIT plugin
;(function( $ ){	$.fn.collapseIT = function(cmd, arg) {	var opts = $.extend({}, $.fn.collapseIT.defaults, cmd, arg);	// console logs for debuging	// debug('opts.clickTitle is: ' + opts.clickTitle);	// debug('opts.clickTitle type is: ' + typeof opts.clickTitle);	// debug('opts.defaultClose is: ' + opts.defaultClose);	// debug('opts.indOpen is: ' + opts.indOpen);	// debug('opts.indClosed is: ' + opts.indClosed);	return this.each(function (){	var $thisInd = $(this),	$titleCont = $thisInd.parent(),	$collpsCont = $titleCont.siblings(),	$fullCont = $titleCont.parent();	var isCollapsed = $collpsCont.css('display');	// check for initial collapse status	if (isCollapsed == 'block') {	$fullCont.addClass('open');	}	else if (isCollapsed == 'none') {	$fullCont.addClass('closed');	}	// set clickable area	if (typeof opts.clickTitle === 'boolean') {	if (opts.clickTitle) {	var $clickArea = $titleCont;	$titleCont.css('cursor', 'pointer');	}	else {	var $clickArea = $thisInd;	$thisInd.css('cursor', 'pointer');	}	}	// set indicator text for open and closed	if (typeof opts.indOpen === 'string' && typeof opts.indClosed === 'string') {	var indTxtO = opts.indOpen,	indTxtC = opts.indClosed;	if (isCollapsed != 'none') {	$thisInd.text(indTxtO);	}	else {	$thisInd.text(indTxtC);	}	}	// click functionality for collapse	$clickArea.click(function () {	$collpsCont.slideToggle();	$fullCont.toggleClass('open');	$fullCont.toggleClass('closed');	contOpen = $fullCont.hasClass('open');	if (contOpen) {	$thisInd.text(indTxtO);	}	else {	$thisInd.text(indTxtC);	}	});	});	};	function debug(logSomething) {	if (window.console && window.console.log) {	window.console.log(logSomething);	}	};	// CREATE DEFAULTS FOR PLUGIN	$.fn.collapseIT.defaults = {	clickTitle : false,	defaultClose : 'none',	indOpen : '-',	indClosed : '+'	}
})( jQuery );
$('.js-collapse').collapseIT({ clickTitle : true, indOpen : '-', indClosed : '+'
});
Collapsible plugin - Script Codes
Collapsible plugin - Script Codes
Home Page Home
Developer Myron Schippers
Username chbymnky
Uploaded September 15, 2022
Rating 3
Size 3,183 Kb
Views 36,432
Do you need developer help for Collapsible plugin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Myron Schippers (chbymnky) Script Codes
Name
Breadcrumb Challenge v1
Bicycle
Parallax Ribbon
Vertical List CSS Module
Buttons with style
JQuery UI Tab Face Lift
Loading Dots
Custom Form Fields
Sliding with CSS
Breadcrumb Challenge v2
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!