Hidden Panel

Developer
Josh Vogt
Size
3,232 Kb
Views
14,168
  1. Hidden Panel Previews
  2. Hidden Panel HTML Codes
  3. Hidden Panel CSS Codes
  4. Hidden Panel JS Codes

How do I make an hidden panel?

A box with a hidden panel, the user can click a thingy to make the hidden panel slide into view.. What is a hidden panel? How do you make a hidden panel? This script and codes were developed by Josh Vogt on 18 November 2022, Friday.

Hidden Panel Previews
IQ Test

Hidden Panel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hidden Panel</title> <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/139759/standard_2014_11.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="worko-box panel-box panel" id="first"> <h3 class="worko-heading">Hidden Panel Box</h3> <p>This is the default panel. It lives within the normal context of a worko-box.</p> <ul> <li>It might contain a list <li>with more than one item <li>this one seems to have three </ul> <p>The hidden panel may or may not be the tallest element. The plugin will equalize the height of the initial panel and the hidden panel. The pabel with the greatest height will determine the height of each panel.</p> <a class="follow-link link js--panel-trigger--show">Show the hidden panel &raquo;</a> <div class="panel-box-content off-canvas panel off-canvas--right"> <h5>Hidden Panel</h5> <p>This is the content of the hidden panel. By default, the hidden panel animates from the bottom, add one of theses classes to the hidden panel to change the direction of the animation: <ul> <li><span class="css-attribute">off-canvas--left</span> <li><span class="css-attribute">off-canvas--right</span> <li><span class="css-attribute">off-canvas--top</span> </ul> </p> <a class="follow-link link js--panel-trigger--hide">Hide the visible panel &raquo;</a> </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>

Hidden Panel - Script Codes CSS Codes

.panel-box { background: #fff; width: auto; margin: 20px; overflow: hidden; position: relative; padding-bottom: 40px;
}
.panel-box-content { background: #fff; position: absolute; top: 0; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.87, 0.78, 0.88, 0.86); transition: -webkit-transform 0.3s cubic-bezier(0.87, 0.78, 0.88, 0.86); transition: transform 0.3s cubic-bezier(0.87, 0.78, 0.88, 0.86); transition: transform 0.3s cubic-bezier(0.87, 0.78, 0.88, 0.86), -webkit-transform 0.3s cubic-bezier(0.87, 0.78, 0.88, 0.86); margin-left: -20px; padding: 20px;
}
.panel-box-content.off-canvas { -webkit-transform: translateY(100%); transform: translateY(100%);
}
.panel-box-content.off-canvas.off-canvas--top { -webkit-transform: translateY(-100%); transform: translateY(-100%);
}
.panel-box-content.off-canvas.off-canvas--left { -webkit-transform: translateX(-100%); transform: translateX(-100%);
}
.panel-box-content.off-canvas.off-canvas--right { -webkit-transform: translateX(100%); transform: translateX(100%);
}
.follow-link { position: absolute; bottom: 20px; right: 20px;
}
.panel-box-content ul { padding: 0;
}
.panel-box-content ul * + * { margin-top: 10px;
}
.panel-box-content ul li { list-style-type: none;
}

Hidden Panel - Script Codes JS Codes

jQuery.fn.extend({ hiddenPanel: function () {	$('.js--panel-trigger--show').on('click', function() { $(this).next('.panel-box-content').removeClass('off-canvas'); }); $('.js--panel-trigger--hide').on('click', function() { $(this).parent('.panel-box-content').addClass('off-canvas'); }); var maxHeight = Math.max.apply(null, $(".panel").map(function() { return $(this).outerHeight(); }).get()); // set panels to the same height $('.panel').css({ height: maxHeight + 'px' }); }
});
$('.panel-box').hiddenPanel();
Hidden Panel - Script Codes
Hidden Panel - Script Codes
Home Page Home
Developer Josh Vogt
Username josh_vogt
Uploaded November 18, 2022
Rating 3
Size 3,232 Kb
Views 14,168
Do you need developer help for Hidden 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!

Josh Vogt (josh_vogt) Script Codes
Name
SMPTE Test Pattern - Flexbox
CSS Grid Layout - Off Canvas Navigation
Toggle - just a dropdown
Header - search v3
Password Reset
Repeating Content Module - Expanding
Workopolis SVG Logo - Animated
CSS modals and sheets animations
A Pen by Josh Vogt
Animating Flexbox Properties
Create amazing captions 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!