1
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>FAQ | jQuery Essentials</title>
<script src="jquery-3.4.1.min.js"></script>
<style>
body {
padding: 10%;
}
.button {
display: inline-block;
padding: 10px 15px;
background: #09f;
color: white;
font-weight: bold;
text-shadow: 1px 1px 0 #000;
cursor: pointer;
}
.button:hover {
background: #069;
}
.fade {
display: flex;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
}
.fade_box {
width: 500px;
background: white;
max-width: 96%;
padding: 20px;
margin: auto;
}
.fade_close {
position: absolute;
top: 5%;
right: 5%;
color: #eee;
font-size: 2em;
font-weight: bold;
cursor: pointer;
}
.fade_close:hover {
color: #bf7676;
}
.fade_box p {
padding: 10px;
background: #eee;
cursor: pointer;
margin: 0;
color: #777;
}
.fade_box p:hover {
color: black;
}
.fade_box p b {
display: inline-block;
vertical-align: middle;
margin-left: 30px;
opacity: 0.5;
padding: 2px 7px;
background: #069;
color: white;
font-size: .7em;
font-weight: bold;
border-radius: 10%;
}
.slide {
background: #eee;
margin: 0;
}
.slide:first-of-type {
margin-top: 20px;
}
.slide * {
margin: 0;
}
.slide h4 {
font-size: 0.875em;
font-weight: 500;
padding: 20px;
margin: 0;
border-bottom: 2px solid #ccc;
cursor: pointer;
}
.slide h4:hover {
background: #fbfbfb;
}
.slide_content {
background: #000;
color: white;
display: none;
padding: 20px 20px 5px 20px;
}
.slide_content p {
font-size: .8em;
margin-bottom: 15px;
}
</style>
</head>
<body>
<span class="expand button">Expanded ALL</span> | <span class="close button">Close All</span> | <span class="toggle button">Toggle All</span>
<div class="slide">
<h4>Lorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshi</h4>
<div class="slide_content">
<p>Lorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshi</p>
<p>Lorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshi</p>
<p>Lorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshi</p>
</div>
</div>
<div class="slide">
<h4>Lorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshi</h4>
<div class="slide_content">
<p>Lorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshi</p>
<p>Lorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshi</p>
<p>Lorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshi</p>
</div>
</div>
<div class="slide">
<h4>Lorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshi</h4>
<div class="slide_content">
<p>Lorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshi</p>
<p>Lorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshi</p>
<p>Lorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi Lorem iihdshi</p>
</div>
</div>
<script>
$(function () {
const speed = 500;
$(".expand").on("click", function () {
$(".slide_content").stop().slideDown(speed, function () {
});
});
$(".close").on("click", function () {
$(".slide_content").stop().slideUp(speed, function () {
});
});
$(".toggle").on("click", function () {
$(".slide_content").stop().slideToggle(speed, function () {
});
});
$(".slide h4").on("click", function () {
// $(this).parent().find(".slide_content").slideToggle(); para n fechar todos automaticamente quando abre um
$(".slide_content").stop().slideUp(speed);
$(this).parent().find(".slide_content").slideToggle();
});
});
</script>
</body>
</html>I am doubtful in the following section of the Cód jQuery:
$(".slide h4").on("click", function () {
// $(this).parent().find(".slide_content").slideToggle(); para n fechar todos automaticamente quando abre um
$(".slide_content").stop().slideUp(speed);
$(this).parent().find(".slide_content").slideToggle();
});
This code snippet should make the text box open and close (when you click on the heading H4 of each of the 3 sections), however it only opens, when I click to close it contracts and expands immediately staying always open