I have 4 dropdown containers. When i am clicking on a header , i want its associated paragraph to appear and other paragraph, that had been appeared ,disappear.
When a header is clicked, i remove active class from all the other paragraphs and add it to the paragraph that its header is clicked. It works fine but the problem is that first the current paragraph appears and then other paragraph disappears but i want them to work synchronously like while one appears another disappears but i do not know how to do that.
HTML:
<div class="dropDown">
<div class="header">
header1
</div>
<p class="active">some things here some things here some things here some things here</p>
</div>
<div class="dropDown">
<div class="header">
header2
</div>
<p>some things here some things here some things here some things here</p>
</div>
<div class="dropDown">
<div class="header">
header3
</div>
<p>some things here some things here some things here some things here</p>
</div>
<div class="dropDown">
<div class="header">
header4
</div>
<p>some things here some things here some things here some things here</p>
</div>
CSS:
.dropDown p{
background: rgb(245, 245, 245);
border-right: 40px solid #e8e8e8;
font-size: 13px;
line-height: 35px;
max-height: 0px;
overflow: hidden;
margin-bottom: 0;
padding: 0px 15px 0px 30px;
transition: max-height .3s ease;
}
.dropDown p.active{
max-height: 500px;
padding-top:8px;
padding-bottom: 20px;
}
jQuery:
Headers.click(function(){
var theP = $(this).parent().children("p"); //current paragraph
dropDownParagrsphs.not(theP).removeClass("active");
theP.toggleClass("active");
});
How can i make the transitions to work together like while one paragraph's height decreases , other paragraph's height increases?
interestingly, you've stumbled on a deceptively difficult problem in pure CSS.
The truth is, your paragraphs are already behaving as you want them to, the problem is that you've specified a large max height relative to the actual content of the p, it gives the impression that they are executed one after the other, but that's just because the time it takes is relatively (compared to actual height of p with overflow: hidden) long to grow/shrink max-height to 500px. It's as if you have an invisible box growing to 500px.
This should be easily solvable by changing your max-height to auto, but unfortunately you cannot animate height auto in pure CSS transitions. your options are:
a) choose a different hardcoded max-height which is closer to the actual content size.
b) use transform scale(Y)
c) use pure JS: for example slideUp and slideDown
var Headers = $('.header')
var dropDownParagraphs = $('.dropDown p')
Headers.click(function(){
var theP = $(this).parent().children("p"); //current paragraph
// theP.addClass("active");
// dropDownParagraphs.not(theP).removeClass("active");
dropDownParagraphs.not(theP).slideUp(200);
theP.slideDown(200);
});
check this codepen for implementation of c)
https://codepen.io/bakuthe3rd/pen/abvzVJz
You can use .slideToogle(duration, easing, callback) method to do so. Also, I've shifted padding-bottom and padding-top properties to p from p.active, so that they don't change dramatically during the transition.
jQuery:
$('p').slideUp(0); // close all
$('.active').slideToggle(300); // open the default
$('.header').click(function() {
var nowP = $(this).parent().children("p"); // current paragraph
var prevP = $('.active'); // opened paragraph
var isSame = $('p').index(prevP) == $('p').index(nowP);
prevP.removeClass("active").slideToggle({ duration: 300, queue: false });
if (!isSame) nowP.addClass("active").slideToggle({ duration: 300, queue: false });
});
$('p').slideUp(0);
$('.active').slideToggle(300);
$('.header').click(function() {
var nowP = $(this).parent().children("p"); // current paragraph
var prevP = $('.active'); // opened paragraph
var isSame = $('p').index(prevP) == $('p').index(nowP);
prevP.removeClass("active").slideToggle({ duration: 300, queue: false });
if (!isSame) nowP.addClass("active").slideToggle({ duration: 300, queue: false });
});
.dropDown p {
background: rgb(245, 245, 245);
border-right: 40px solid #e8e8e8;
font-size: 13px;
line-height: 35px;
overflow: hidden;
margin-bottom: 0;
padding: 0px 15px 0px 30px;
transition: max-height .3s ease;
padding-top: 8px;
padding-bottom: 20px;
}
.dropDown p.active {
max-height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropDown">
<div class="header">
header1
</div>
<p class="active">some things here some things here some things here some things here</p>
</div>
<div class="dropDown">
<div class="header">
header2
</div>
<p>some things here some things here some things here some things here</p>
</div>
<div class="dropDown">
<div class="header">
header3
</div>
<p>some things here some things here some things here some things here</p>
</div>
<div class="dropDown">
<div class="header">
header4
</div>
<p>some things here some things here some things here some things here</p>
</div>
Also, you'll notice that on clicking the same link, the dropdown will be closed. I've added this as I expect this is probably the desired effect :)
Further, you can add 'linear' as second argument in .slideToggle method, if you need a linear transition. By default, it is 'swing'.
Related
My apologies if the subject is a bit non-descriptive. I'm having a hard time trying to explain what I'm trying to achieve in a one-liner.
But in a few sentences: I'm trying to have an element, a DIV in this case, move smoothly to its new position. But the caveat is that I'm not setting its position manually. It receives a new position because I'm removing other DIVs from the page flow.
<!DOCTYPE html>
<html>
<head>
<style>
.block {
width: 200px;
height: 20px;
border: 1px solid black;
margin: 20px;
}
</style>
<script>
function removeBlock() {
document.getElementById("block2").style.display = "none";
}
</script>
</head>
<body>
<div id="block1" class="block">
This is block 1
</div>
<div id="block2" class="block">
This is block 2
</div>
<div id="block3" class="block">
This is block 3
</div>
<button type="button" onclick="removeBlock();">
Remove block 2
</button>
</body>
</html>
Here's the fiddle: https://jsfiddle.net/nfhycrkL/
If you click the button, Block 2 is hidden and Block 3 moves up. I want this move to be smooth. Is this at all possible? I don't want to use absolute positioning since the page is responsive and the position of the DIVs are depending on the page size.
Try This Solution
function removeBlock()
{
document.getElementById("block2").style.height = "0px";
document.getElementById("block2").style.margin = "0px";
document.getElementById("block2").style.borderWidth = "0px";
document.getElementById("block2").style.fontSize = "0px";
}
.block {
width: 200px;
height: 20px;
border: 1px solid black;
margin: 20px;
}
#block2 {
transition:all 0.5s linear;
}
<div id="block1" class="block">
This is block 1
</div>
<div id="block2" class="block">
This is block 2
</div>
<div id="block3" class="block">
This is block 3
</div>
<button type="button" onclick="removeBlock();">
Remove block 2
</button>
You could add a new class to an element with javascript that you want to hide and do css transition.
Here's a small example with remove and toggle options https://jsfiddle.net/nfhycrkL/9/
html:
<div id="block1" class="block">
This is block 1
</div>
<div id="block2" class="block">
This is block 2
</div>
<div id="block3" class="block">
This is block 3
</div>
<button type="button" onclick="toggleBlock();">
Toggle block 2
</button>
<button type="button" onclick="removeBlock();">
Remove block 2
</button>
js :
function toggleBlock() {
document.getElementById("block2").classList.toggle('block-hidden')
}
function removeBlock() {
document.getElementById("block2").classList.add('block-hidden')
}
css:
.block {
width: 200px;
height: 20px;
border: 1px solid black;
margin: 0 20px 20px;
overflow:hidden;
transition: all .25s;
}
.block-hidden {
height: 0px;
margin: 0px;
border: none;
}
$(document).ready(function(){
$("button").click(function(){
//document.getElementById("block2").style.display = "none";
$("#block2").fadeOut(1000);
});
});
.block {
width: 200px;
height: 20px;
border: 1px solid black;
margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<div id="block1" class="block">
This is block 1
</div>
<div id="block2" class="block">
This is block 2
</div>
<div id="block3" class="block">
This is block 3
</div>
<button type="button">
Remove block 2
</button>
use Jquery effects. I hope this helps.
Here's a simple example in vanillaJS with a CSS transition
Jsfiddle demo
Update your style adding a transition for the .block element
CSS
.block {
width: 200px;
height: 20px;
border: 1px solid black;
margin: 20px 20px 0;
max-height: 500px;
transition: opacity 0s 0s, margin .25s 0s, max-height .25s 0s;
}
.removedBlock {
box-sizing: border-box;
opacity: 0;
margin: 0;
max-height: 0;
}
so that the function can trigger a max-height animation by adding the removedBlock class
<div id="block1" class="block">
This is block 1
</div>
<div id="block2" class="block">
This is block 2
</div>
<div id="block3" class="block">
This is block 3
</div>
<button type="button" onclick="removeBlock('block2');">
Remove block 2
</button>
JS
function removeBlock(id) {
var block = document.getElementById(id);
block.classList.add('removedBlock');
}
When you do a removal, the element disappears due the opacity set to 0, then margin and max-height will make the block collapsing.
Note that since a transition can't be triggered to/from an auto value I've set a huge starting max-height for this purpose. If you want to see a smoother transition either change that property with a lower value or simply increase the duration of the transition.
A more refined version could instead get the height of the element before applying the transition e.g.
function removeBlock(id) {
var block = document.getElementById(id);
var blockHeight = block.offsetHeight;
block.style.height = blockHeight + 'px';
block.classList.add('removedBlock');
}
so the style becomes
.block {
width: 200px;
height: 20px;
border: 1px solid black;
margin: 20px 20px 0;
transition: opacity 0s 0s, margin .5s 0s, height .5s 0s;
}
.removedBlock {
box-sizing: border-box;
opacity: 0;
margin: 0;
height: 0 !important;
}
JsFiddle
Thanks everybody for your answers! And although all of them work somewhat, they do not work as soon as the layout becomes more complex, or if you try to hide/show more/other objects.
So I spend the past few hours creating a Javascript solution that I think will work in any situation (and on any browser too).
In short, how it works is that you "mark" as many elements as you like to be hidden/shown with the SetDisplay() function (see the first button). Once that has been done, you call the same SetDisplay function without any parameters and see the magic happen! The Javascript actually quickly removes the elements and let the page reflow (all invisible to the viewer). It then examines the new positions, reinserts the elements to hide and move all other elements to their new position by setting style.transition and by using position:relative and new top and left values. Once it's done with the transition, it hides the elements permanently, resets all changed style values and let the page reflow again.
SetDisplay( "block2", "none" );
SetDisplay( "block3", "none" );
SetDisplay( "block4", "none" );
SetDisplay();
You can reinsert elements the same way (the second button).
SetDisplay( "block2", "" );
SetDisplay();
https://jsfiddle.net/yq7xor5j/3/
(Edit: made a change to the fiddle to correct a small bug)
I am working on a layout that is similar in nature to a slot machine. Each of its children will be text, and the layout is responsive (so at different resolutions, the children's text may or may not wrap to multiple lines, thus changing the height).
The layout will have a visible "viewport" of 3 items at a time. So that the "viewport" does not shift around, all children need to have the same height. This got me thinking of 2 different routes, but I can't make either work.
Use display: flex. With a column layout, you can have them all stack. The problem with this is, I don't think you can make all children have the same height unless you specify a calculated height on the flex container (thus, you'd have to use js to calculate the max height of all the flex children)
Use display: grid. Out of the box you can make all children have equal height with grid. The problem is, how do hide the overflow guaranteeing you are only showing 3 at a time in the "viewport" for the slot machine?
This layout may not be possible without js calculations, but because of the fact that it has to be completely responsive, I don't want to have to redo the calculations on every window resize. Can anyone think of a way to do this using pure css?
I made a fiddle to show a bare-bones implementation. The "viewport" is the red box, and each item is in the blue box. In the real world, I would be hiding everything outside of the red box and would not want to have to specifically set height on any container.
var scroll = document.getElementById('scroll');
var wrapper = document.getElementById('wrapper');
scroll.addEventListener('click', function() {
wrapper.classList.toggle('scrolled');
});
.example {
display: flex;
}
.container {
height: 90px;
width: 300px;
outline: 1px solid red;
z-index:1;
}
.wrapper {
display: flex;
flex-direction: column;
transition-property: transform;
transition-duration: 500ms;
}
.wrapper.scrolled {
transform: translateY(-300px);
}
.inner {
outline: 1px solid blue;
flex-grow: 1;
height: 30px;
}
.buttons {
margin-right: 3em;
}
<div class="example">
<div class="buttons">
<button id="scroll">Scroll</button>
</div>
<div class="container">
<div id="wrapper" class="wrapper">
<div class="inner">Some text</div>
<div class="inner">Some text</div>
<div class="inner">Some text</div>
<div class="inner">Some text</div>
<div class="inner">Some text</div>
<div class="inner">Some text</div>
<div class="inner">Some text</div>
<div class="inner">Some text</div>
<div class="inner">Some text</div>
<div class="inner">Some text</div>
<div class="inner">Some text</div>
<div class="inner">Some text</div>
<div class="inner">Some text</div>
<div class="inner">Some text</div>
</div>
</div>
</div>
Hey so I think I get what you're going for here and designed a "slot machine" mechanic that scales its inner and outer objects using vh.
So the container object would have something like...
.container {
width: 300px;
height: 90vh;
outline: 1px solid red;
z-index:1;
overflow: hidden;
}
...and the inner object would have something like...
.inner {
outline: 1px solid blue;
flex-grow: 1;
height: 30vh;
}
I also adjusted the Javascript scrolling to base the amount scrolled off of what object is being scrolled to. This can be automated with something like a timer instead of the button:
var scroll = document.getElementById('scroll');
var wrapper = document.getElementById('wrapper');
var innerArray = document.getElementsByClassName('inner');
var innerNum = 1; // Start at the second element
scroll.addEventListener('click', function() {
if (innerNum == innerArray.length-2) { // Check to see if the last item has been scrolled to
innerNum = 0; // Scroll back to the first item if it has
}
//wrapper.classList.toggle('scrolled');
innerArray[innerNum].scrollIntoView({
behavior: 'smooth'
});
innerNum++;
});
Here is the Codepen that demonstrates the example. I can clarify the code further if you would like me to. My apologies if I was way off the ball on what you were going for!
I have searched for about 2 hours now and I just can't get a hold of this.
I am using bootstrap and I want to have three columns with "col-xs-6" placed next to each other. However, when I click the button, I want the outer column that is visible to collapse in and the column on the other side to show up. The blue column in the middle should not change at all, just the visibility of the outer columns.
I know I could just use display: none but this would not look as smooth as a CSS3 Transition.
The fade Out works perfectly fine, but instead of fading in, the div will just be at 50% width right after the display property has set.
Here is a fiddle:
Fiddle
And here is the Code:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 red fadeIn">
Hello i am the red div
</div>
<div class="col-xs-6 blue">
Hello i am the blue div
</div>
<div class="col-xs-6 green fadeOut is-out">
Hello i am the green div
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="pull-right">
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-plus"></span> TOGGLE
</button>
</div>
</div>
</div>
</div>
JS:
$('.btn').click(function(){
var eleForFadeIn;
var eleForFadeOut;
if ($('.green').hasClass('is-out')){
eleForFadeIn = $('.green');
eleForFadeOut = $('.red');
}
else {
eleForFadeIn = $('.red');
eleForFadeOut = $('.green');
}
eleForFadeIn.addClass('fadeIn');
eleForFadeIn.removeClass('fadeOut');
eleForFadeOut.addClass('fadeOut');
eleForFadeOut.removeClass('fadeIn');
setTimeout(function() { doFadeIn(eleForFadeIn); }, 150);
setTimeout(function() { doFadeOut(eleForFadeOut); }, 1500);
});
function doFadeIn(element){
element.removeClass('is-out');
}
function doFadeOut(element){
element.addClass('is-out');
}
CSS:
.red{
background-color: red;
height: 250px;
-webkit-transition: width 2s;
transition: width 2s;
}
.blue{
background-color: blue;
height: 250px;
}
.green{
background-color: green;
height: 250px;
-webkit-transition: width 2s;
transition: width 2s;
}
.fadeOut{
width: 0px;
}
.fadeIn{
width: 50%;
}
.is-out{
display: none;
}
Thanks in Advance!
Edit: The timeout functions are used because i want the display property to be none at the end of the transition. Yes i tried to build in the transition eventlistener but it did not work... So if you know how to implement int i would appreciate any suggestions :-)
Edit2: Trying to express myself a bit more cleary about my goals.
display:none can't really be animated and that is where your problem lies. Change it to this and all should be well.
.is-out {
visibility: hidden;
padding: 0;
}
The JSFiddle you show doesn't produce three adjacent columns. Regardless, the reason the column takes up 50% of the width after the fade out is because it has the class col-xs-6. This class uses Bootstrap's grid system to size the element to 6/12 == 1/2 the available horizontal space.
If you want three adjacent columns, I suggest using col-xs-4 since 12/3 == 4. After fading out the outer two columns. You should adjust the class of the remaining one to be col-xs-12 instead of col-xs-4 so it will take up the entire horizontal width.
JSFiddle : https://jsfiddle.net/ttpkfs9s/
I have a UI component that should arrange elements into a row and displays them with elements on the left and on the right, with the active element being in the middle:
[1][2][3] [4] [5][6][7][8][9]
So far I have been achieving this by floating elements left and right, while keeping the one in the middle float: none; (this is good enough).
However, way too late into implementing the navigation JS I realised that I've made a huge mistake, and that the actual order the elements are displayed in are as follows:
[1][2][3] [4] [9][8][7][6][5]
Which is a huge problem as these elements are supposed to be clickable /facepalm
Are there any at most not too invasive CSS/HTML options I can use to get the displayed order correct?
EDIT: I missed the part about you needing the active div to always be in the center of the row.
You could contain the div's inside a container, and float the container insted, but that would probably be hard to do.
I took the liberty of changing things up abit, maybe you can use it, maybe u can't.
I set all items to the same width, and made a function for resizing the div's after u click one of the items.
https://jsfiddle.net/ttpkfs9s/1/
html
<div class="row">
<div class="item left">1</div>
<div class="item left">2</div>
<div class="item left">3</div>
<div class="item left">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
css
.row {
height: 150px;
background: blue;
width: 100%;
}
.item {
float: left;
padding: 2.5px;
color: white;
width: 9.4%;
height: 100%;
background: red;
margin: 0 0.3%;
box-sizing: border-box;
transition: 0.7s linear;
}
.active {
color: black;
background: yellow;
}
js
function setWidth(){
if($(".item").hasClass("active")){
$(".item").width("6%");
$(".active").width("40%");
};
}
$(".item").click(function(){
$(".item").removeClass("active");
$(this).addClass("active");
setWidth();
})
I am looking at this example on this website. I wanted to create an effect similar like that where you have a <div> that has some <p> in it and there's a button to show the full expanded description. I've analyzed the html and it looks like this:
<div class="product-description">
<div class="desc-wrap" itemprop="description">
<p>Material: wool
<br>6 Colors: Black, Yellow, Gray, Wine Red, Green, Navy Blue
<br>Size: One size only
<br>Recommended for size SMALL
<br>It has been noted by customers that these skirts are short.
<br>*Please check the measurement picture for sizing information. There are no refunds on orders that were messed up on your behalf.
</p>
<p>Note: Due to the difference between different monitors, the color may be off a tiny bit.</p>
<p>WORLDWIDE SHIPPING!
</p>
</div>
<div class="desc-fade"></div>
<div class="open-link" style="display: block;">Expand Full Description</div>
</div>
I assume that there's a javascript function that expands the box on click. But what is that? How do I reproduce this same effect?
Here's an example for exectly what you wanted: http://jsfiddle.net/kedem/D9NCP/
css:
.product-description {
height:150px;
overflow: hidden;
position:relative;
}
.product-description.open {
height:auto;
overflow: hidden;
position:relative;
}
.desc-fade {
width: 200%;
margin-left: -50%;
height: 30px;
background: #fff;
z-index: 1;
position: absolute;
-webkit-box-shadow: 0 0 20px 30px #fff;
-moz-box-shadow: 0 0 20px 30px #fff;
box-shadow: 0 0 20px 30px #fff;
bottom: 0;
left: 0;
opacity: 1;
-webkit-transition: opacity 250ms, 1s;
-moz-transition: opacity 250ms, 1s;
-o-transition: opacity 250ms, 1s;
transition: opacity 250ms, 1s;
}
.open-link {
position:absolute;
bottom: 15px;
z-index:2;
}
jquery:
$(function () {
var wrapHeight = $(".product-description .desc-wrap").height();
var descHeight = $(".product-description").height();
if (wrapHeight <= descHeight) {
$(".product-description .desc-fade").hide();
$(".product-description .open-link").hide();
}
$(".product-description .open-link").click(function () {
$(this).hide();
$(".product-description .desc-fade").hide();
$(".product-description").animate({
height: wrapHeight
}, 1000);
});
});
Does this works for you?
JSFIDDLE Demo
HTML
<div class="div-wrapper">
<div class="hider">
<p>Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown </p>
</div>
Show all
</div>
CSS
/* this first one is not necesary */
.div-wrapper {
width:300px;
border:solid 1px #000;
}
.div-wrapper>.hider {
height: 100px;
transition: ease-in-out all 0.2s;
overflow:hidden;
}
JQUERY
$(document).ready(function(e) {
$('.open-link').click(function(e) {
var $wrapper = $(this).parent().find('.hider');
$wrapper.css('height',$wrapper.find('p').height());
$(this).remove();
})
});
let me know if it's useful.
Using DOM inspector, it will help you understanding the trick. First they use a constant height for the container. Onclick remove the text and expand the div by setting a bigger height.
However, we have to determine the total height of the div so we shouldn't hide the expanded part from the start
http://jsfiddle.net/2SMF2/2/
$('.expand').click(function () {
$('#test').removeClass('collapsed', 'fast')
$(this).remove();
});
How about this:
http://jsfiddle.net/VvBRh/
What I have done:
$('.open-link a').click(function(){
if($(".desc-wrap").css("height") == "60px") {
//Find auto height of div and save it
$('.desc-wrap').css('height', 'auto');
var autoHeight = $('.desc-wrap').height();
//Revert back to 2 lines
$('.desc-wrap').css('height', '60px');
//Animate to the saved autoHeight
$(".desc-wrap").animate({height: autoHeight}, 1000);
} else {
//Shrink back to 2 lines (you can remove this if you want)
$(".desc-wrap").animate({height: "60px"}, 1000);
}
return false;
});
You will also need to add a little css to get inital settings:
.desc-wrap { height: 60px; overflow: hidden }
I'm sure this could be more elegant, and you could derive the height of 2 lines instead of fixed px, but I'll leave that up to you to decide ;)
Here is the complete code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
var $divView = $('div.view');
var innerHeight = $divView.removeClass('view').height();
$divView.addClass('view');
$('div.slide').click(function() {
$('div.view').animate({
height: (($divView.height() == 110)? innerHeight : "110px")
}, 500);
return false;
});
});
</script>
<style>
.view{
overflow:hidden;
height: 110px;
}
.total{
border:1px solid;
/*height:130px;
overflow-y:auto;*/
}
</style>
</head>
<body>
<div class="total">
<div class="view">
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
</div>
<div class="slide" style="cursor: pointer;">Show/Hide</div>
</div>
</body>
</html>