Folding Panel

Developer
François Chazal
Size
6,671 Kb
Views
24,288
  1. Folding Panel Previews
  2. Folding Panel HTML Codes
  3. Folding Panel CSS Codes
  4. Folding Panel JS Codes

How do I make an folding panel?

Folds and unfolds a panel. What is a folding panel? How do you make a folding panel? This script and codes were developed by François Chazal on 21 September 2022, Wednesday.

Folding Panel Previews
IQ Test

Folding Panel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Folding Panel</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
html { font-size: 11px;
}
* { outline: 1px solid transparent;
}
body { overflow: hidden; min-height: 100%; font: 1em/1.5em 'Roboto Condensed', sans-serif;
}
#content { position: relative; padding-top: 30px; /* CONTAINER */
}
#content #parameters { position: absolute; z-index: 100; top: 0px; right: 0px;
}
#content #element { margin: auto; width: 300px;
}
#content #element .title { padding: 5px; background: #ccc; font-size: 1.5rem; font-weight: 700; cursor: pointer;
}
#content #element .title::after { content: 'CLICK TO CLOSE'; margin-left: 10px; font-size: 0.8rem;
}
#content #element .title:hover { background: #aaa;
}
#content #element .content { background: #eee; padding: 5px; font-size: 1.1em; font-weight: 300;
}
#content #element .content p { margin: 5px;
}
#content #element > .content { display: none;
}
#content #element.closed .title::after { content: 'CLICK TO OPEN';
}
#content #element .container { perspective-origin: 50% 50%; perspective: 1000px; overflow: hidden; transition: all 1s cubic-bezier(0.04, 0, 0.56, 1);
}
#content #element .container .fold { transform-origin: 0% 0%; transform-style: preserve-3d; transition: all 1s linear;
}
#content #element .container .tile { position: relative; overflow: hidden;
}
#content #element .container .tile .shadow { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 1s linear;
}
#content #element.closed .container { height: 0px !important; transition: all 1s cubic-bezier(0.49, 0, 0.96, 1);
}
#content #element.closed .container .fold.first { transform: rotateX(-90deg);
}
#content #element.closed .container .fold.first > .tile > .shadow { opacity: 1;
}
#content #element.closed .container .fold.even { transform: rotateX(180deg);
}
#content #element.closed .container .fold.odd { transform: rotateX(-180deg);
}
#content #element.closed .container .fold.odd > .tile > .shadow { opacity: 1;
}
#about { position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50px; color: #fff; background: rgba(0, 0, 0, 0.8);
}
#about-title { position: absolute; left: 25px; bottom: 25px; font-size: 2em; font-weight: 700;
}
#about-author { position: absolute; left: 25px; top: 27px; font-size: .9em; font-weight: 300;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section id="content"> <div id="element" class=""> <div class="title">Lorem Ipsum</div> <div class="content"> <p align="center"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSkpfjt_8FYXJ-NmpKksPVWvkmwPdPMLpnwbnMDzWl12xVjKqdkPQ" width="240" /></p> <p>Sed maximum est in amicitia parem esse inferiori. Saepe enim excellentiae quaedam sunt, qualis erat Scipionis in nostro, ut ita dicam, grege. Numquam se ille Philo, numquam Rupilio, numquam Mummio anteposuit, numquam inferioris ordinis amicis, Q. vero Maximum fratrem, egregium virum omnino, sibi nequaquam parem, quod is anteibat aetate, tamquam superiorem colebat suosque omnes per se posse esse ampliores volebat.</p> <p>Hoc inmaturo interitu ipse quoque sui pertaesus excessit e vita aetatis nono anno atque vicensimo cum quadriennio imperasset. natus apud Tuscos in Massa Veternensi, patre Constantio Constantini fratre imperatoris, matreque Galla sorore Rufini et Cerealis, quos trabeae consulares nobilitarunt et praefecturae.</p> <p>Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris vitae ministro praesente paterfamilias uxori susurrasset in aurem, velut Amphiarao referente aut Marcio, quondam vatibus inclitis, postridie disceret imperator. ideoque etiam parietes arcanorum soli conscii timebantur.</p> </div> </div>
</section>
<section id="about"> <div id="about-title">Folding Panel</div> <div id="about-author">an experimentation by François Chazal (@fchazal)</div>
</section> <script src='https://dat-gui.googlecode.com/git/build/dat.gui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Folding Panel - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
html { font-size: 11px;
}
* { outline: 1px solid transparent;
}
body { overflow: hidden; min-height: 100%; font: 1em/1.5em 'Roboto Condensed', sans-serif;
}
#content { position: relative; padding-top: 30px; /* CONTAINER */
}
#content #parameters { position: absolute; z-index: 100; top: 0px; right: 0px;
}
#content #element { margin: auto; width: 300px;
}
#content #element .title { padding: 5px; background: #ccc; font-size: 1.5rem; font-weight: 700; cursor: pointer;
}
#content #element .title::after { content: 'CLICK TO CLOSE'; margin-left: 10px; font-size: 0.8rem;
}
#content #element .title:hover { background: #aaa;
}
#content #element .content { background: #eee; padding: 5px; font-size: 1.1em; font-weight: 300;
}
#content #element .content p { margin: 5px;
}
#content #element > .content { display: none;
}
#content #element.closed .title::after { content: 'CLICK TO OPEN';
}
#content #element .container { perspective-origin: 50% 50%; perspective: 1000px; overflow: hidden; transition: all 1s cubic-bezier(0.04, 0, 0.56, 1);
}
#content #element .container .fold { transform-origin: 0% 0%; transform-style: preserve-3d; transition: all 1s linear;
}
#content #element .container .tile { position: relative; overflow: hidden;
}
#content #element .container .tile .shadow { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 1s linear;
}
#content #element.closed .container { height: 0px !important; transition: all 1s cubic-bezier(0.49, 0, 0.96, 1);
}
#content #element.closed .container .fold.first { transform: rotateX(-90deg);
}
#content #element.closed .container .fold.first > .tile > .shadow { opacity: 1;
}
#content #element.closed .container .fold.even { transform: rotateX(180deg);
}
#content #element.closed .container .fold.odd { transform: rotateX(-180deg);
}
#content #element.closed .container .fold.odd > .tile > .shadow { opacity: 1;
}
#about { position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50px; color: #fff; background: rgba(0, 0, 0, 0.8);
}
#about-title { position: absolute; left: 25px; bottom: 25px; font-size: 2em; font-weight: 700;
}
#about-author { position: absolute; left: 25px; top: 27px; font-size: .9em; font-weight: 300;
}

Folding Panel - Script Codes JS Codes

/* REQUIREMENTS ******************************/
requireScripts( [ 'https://dat-gui.googlecode.com/git/build/dat.gui.min.js' ], function() { Global.init(); }
);
/* ELEMENT : Global
**********************************************/
var Global = { gui: null, fold: null, // parameters panels: 10, toggle: function() { if (this.fold) this.fold.toggle(); }, init: function() { this.gui = new dat.GUI({ autoPlace: true }); this.gui.domElement.id = 'parameters'; this.gui.add(Global, 'panels',2, 20).step(2).name('Panels number :').onFinishChange(this.setPanels); this.gui.add(Global, 'toggle').name('Toggle open/close'); }, setPanels: function (value) { if (this.fold) this.fold.element.removeChild(this.fold.container); this.fold = new Fold('#element', value); }
};
/* OBJECT : Fold
**********************************************/
function Fold(elt, panels) { this.element = document.querySelector(elt); this.title = this.element.querySelector('.title'); this.content = this.element.querySelector('.content'); this.init(panels); addEvent(this.title, 'click', this.toggle, this);
};
Fold.prototype = { tiles: [], title: null, content: null, element: null, container: null, toggled: true, init: function(tilesNb) { this.container = document.createElement('div'); this.container.addClass('container'); this.element.appendChild(this.container); var tile = document.createElement('div'); tile.appendChild(this.content.cloneNode(true)); tile.addClass('tile'); var shadow = document.createElement('div'); shadow.addClass('shadow'); tile.appendChild(shadow); var fold = document.createElement('div'); fold.addClass('fold'); var container = this.container; var oddity = false; for (i=0; i<tilesNb; i++) { this.tiles.push(tile.cloneNode(true)); var tmp = fold.cloneNode(true); tmp.addClass(oddity ? 'even' : 'odd'); oddity = !oddity; if (!i) tmp.className='fold first'; tmp.appendChild(this.tiles[i]); container.appendChild(tmp); container = tmp; } var totalHeight = this.tiles[0].offsetHeight;// alert(totalHeight); var tileHeight = Math.ceil(totalHeight / tilesNb); var containerHeight = tileHeight * tilesNb; for (i=0; i<tilesNb; i++) { this.tiles[i].style.height = tileHeight+'px'; this.tiles[i].children[0].style.marginTop = -i*tileHeight+'px'; } this.container.style.height = containerHeight+'px'; }, toggle: function() { if (this.toggled == true) { this.toggled = false; this.element.removeClass('closed'); } else { this.toggled = true; this.element.addClass('closed'); } }
}
/* LIBRARY : Class Management
***********************************************/
Element.prototype.hasClass = function(cls) {	return null !== this.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
Element.prototype.addClass = function(cls) {	if (!this.hasClass(cls)) this.className += " "+cls;
}
Element.prototype.removeClass = function(cls) { if (this.hasClass(cls)) { var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');	this.className = this.className.replace(reg,' ');	}
}
Element.prototype.toggleClass = function(cls) { if (!this.hasClass(cls))	this.addClass(cls);	else	this.removeClass(cls);
}
/* LIBRARY : Requirements Management
***********************************************/
function requireScripts(scripts, callback) { for (var id in scripts) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = scripts[id] + '?' + (new Date().getTime()); if (callback) { script.onreadystatechange = callback; script.onload = script.onreadystatechange; } document.getElementsByTagName('head')[0].appendChild(script); }
}
/* LIBRARY : Event Management
***********************************************/
function addEvent(eventTrigger, eventName, eventHandler, scopeElement) {	var scopedEventHandler = null;	if (scopeElement !== undefined)	scopedEventHandler = function(e) { eventHandler.apply(scopeElement, [e]); }	else	scopedEventHandler = eventHandler; if(document.addEventListener) eventTrigger.addEventListener(eventName, scopedEventHandler, false); else if(document.attachEvent) eventTrigger.attachEvent("on"+eventName, scopedEventHandler);
}
function fireEvent(eventTrigger, eventName, eventData) {	var evt = null;	if (typeof Event !== 'undefined') {	evt = new Event(eventName);	} else {	evt = document.createEvent("Event");	evt.initEvent(eventName, true, true);	} evt.data = eventData; eventTrigger.dispatchEvent(evt);
}
Folding Panel - Script Codes
Folding Panel - Script Codes
Home Page Home
Developer François Chazal
Username fchazal
Uploaded September 21, 2022
Rating 3
Size 6,671 Kb
Views 24,288
Do you need developer help for Folding Panel?

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!

François Chazal (fchazal) Script Codes
Name
The Cube
Parallax Scrolling
Obama
Hexagona
Logo
Penrose Triangle CSS
WebTechs Animated Logo
World
Ribbon Animated Effect
HExa
Create amazing SEO content 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!