Arashjot Kaur
Reputation: 51
Jquery show and hide function
I am trying to make multiple div h3 use the hide and show function. When the user first accesses the website on the faq page, the user hovers over the question, and when they click on it, the answers are shown below. When they click the question again, the answer is hidden. I need to do this for 3 more questions, but I don't know specifically how to.
I did the first question, it worked perfectly fine, but I'm stuck on the last three. I've tried following many examples but nothing has changed so far.
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BRICKSxMORTAR: F.A.Q.</title>
<script src="script/jquery-ui.js"></script>
<script src="script/jquery-3.6.0.min.js"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<script>
$(document).ready(function() {
$("h3+i").hide()
$("h3:nth-of-type(1)").click(function() {
$("h3:nth-of-type(1)+i").toggle("drop");
$("i:nth-of-type(1)+h3").toggle("drop");
$("h3:nth-of-type(1)+p").toggle("drop");
$("h3:nth-of-type(1)+p").toggle("drop");
});
});
$(document).ready(function(){
$("def1").click(function(){
$("modal").modal();
})
})
</script>
<style>
h3.magenta{
cursor: pointer;
background-color: aquamarine;
transition-property: magenta;
}
</style>
</head>
<style>
@font-face {
font-family: 'agendaimport';
src: url('../Demo\ Site\ Stage\ 3\ pt\ 2/type/agenda_medium.woff2')
format('woff2'),
url('../Demo\ Site\ Stage\ 3\ pt\ 2/type/agenda_medium.woff')
format('woff');
font-weight: normal;
font-style: normal;
}
h1{
font-family: 'agenda';
font-size: 1.8em;
}
body{
background-image: url("images/BRICKSxMORTAR.jpg");
background-size: 200px;
background-color: black;
color: floralwhite;
font-size: 1.2 em;
font-family: 'Courier New', Courier, monospace;
width: 100%;
height: auto;
margin: auto;
}
a {
color: aquamarine;
font-size: 25px;
}
h3{
color: magenta;
font-size: 28px;
font-weight: bold;
}
b{
color: aquamarine;
font-size: 40px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
#wrapper{
width: 80%;
height: auto;
margin: auto;
padding: 1em;
background: #000;
position: relative;
top: 4.5em;
z-index: 0;
}
div {
color: rgb(255, 255, 255);
font-size: 22px;
}
q{
color: magenta;
}
i{
color: rgb(255, 255, 255);
font-size: 22px;
}
#img{
display: block;
margin: auto;
}
#logo{
display: block;
margin: auto;
width:60%;
height:auto;
}
nav{
width: 100%;
height: auto;
background: aquamarine;
margin-right: auto;
margin-left: auto;
margin-top: -99em;
padding: 1em 0;
text-align: center;
margin-bottom: 1em;
padding-top: 1em white;
padding-bottom: 1em white;
color: magenta;
/*border-top: 1px white;
border-bottom: 1px white;*/
transition: margin-top 0.8s ease-in-out;
}
a.menu:link{
display: block;
color: black;
}
a.menu:visited{
color: rgb(16, 20, 19);
text-decoration: none;
}
a.menu:hover{
color: magenta;
text-decoration: underline;
background-color: aquamarine;
}
a.menu:active{
text-decoration: underline;
background-color: aquamarine;
}
#magenta{
font-size: 0.8 em;
}
#smaller{
font-size: 0.8em;
color: black;
}
footer{
width: 100%;
background-color: floralwhite;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
clear: both;
}
footer p{
margin: auto;
width: 90%;
color: magenta;
}
footer a{
margin: auto;
width: 90%;
color: magenta;
}
footer p:link{
color:black;
}
footer a:link{
color:black;
}
.floatLeft{
float:left;
}
.floatRight{
float:right;
}
#banner{
width: 100%;
height: auto;
background: #000;
border-bottom: 1px solid #fff;
position: fixed;
z-index: +1;
top: 0;
left: 0;
right: 0;
}
header{
width: 100%;
height:auto;
margin-bottom:2em;
}
header p{
width: 99%;
height: auto;
color: black;
background-color: aquamarine;
font-weight:bold;
padding-left:1%;
}
header:hover nav{
margin-top:-1em;
}
header:hover p{
color: magenta;
cursor: pointer;
}
h1{
animation-name: strobe;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes strobe{
0%{
color: floralwhite;
}
50% {
color: magenta;
}
100%{
color:white;
}
}
a.definition:link{
color: white;
text-decoration-style: underline;
text-decoration-style: wavy;
}
a.definition:visited{
color: white;
text-decoration-style: underline;
text-decoration: wavy;
}
a.definition:hover{
cursor: pointer;
color: magenta;
}
a.definition:active{
cursor: pointer;
color: magenta;
}
#modal{
color: black;
}
h3:hover{
background-color: aquamarine;
}
</style>
</html>
<body>
<br>
<div id="banner">
<img src="images/logo.png" id="logo" /></div>
<br>
<br>
<div id="wrapper" max-width="50px">
<header>
<p>menu</p>
<nav>
<a class="menu" href="OURSTORY.HTML" >OUR STORY</a>
<a class="menu" href="#" >OUR SERVICES</a>
<a class="menu" href="#" >LOCATIONS</a>
<a class="menu" href="#" >F.A.Q</a>
<a class="menu" href="Indexxxx.html">HOME</a>
</nav>
</header>
/*<div id="def1" class="modal">
<p>
<strong>What Do We Mean By Galleries?</strong><br/><br/>
While we do sell a limited array of items off the rack, the majority of the clothes that we make are custom-to-order. So, we do not have stock to fill the shelves per se, let alone multiples of items in different sizes. Instead, what you'll find when you arrive is a curated collection of our best work displayed on mannequins of many different sizes and shapes.
</p>
</div>*/
<div id="mission">
<h1 style="color:magenta">The mission of BRICKSxMORTAR is to transform how Canadians think about fashion.</h1>
<hr>
<br>
<b style="font-family: Arial, Helvetica, sans-serif">F.A.Q</b>
<br>
<h3>
Do I need to make an appointment, or can I walk right in?
</h3>
<i>
While our physical locations are open to the public to come in and explore <a href="#def1" class="definition" rel="modal:open">our galleries</a>,
we do ask that you call or e-mail ahead of time if you're interested in a design consultation or a fitting. Just send us your name, a
number we can reach you with, and a preferred date and time, using the e-mail link at the bottom of the page.
</i>
<div id="def1" class="modal" color="magenta">
<q>
<strong>What Do We Mean By Galleries?</strong><br/><br/>
While we do sell a limited array of items off the rack, the majority of the clothes that we make are custom-to-order.
So, we do not have stock to fill the shelves per se, let alone multiples of items in different sizes. Instead, what you'll find when you arrive is a curated collection of our best work displayed on mannequins of many different sizes and shapes.
</q>
</div>
<br>
**<h3 id="h3+isecond">
Do I need to have my own fabric and materials picked out ahead of time?
</h3>**
<div>
No, that's all part of the fun and the customer experience. One of our talented designers will be happy to walk you through fabric samples,
make recommendations, and place orders on your behalf for everything you need to create the perfect custom look.
</div>
<br>
** <h3>
Do you make men's clothing?
</h3>**
<div>
Yes, we make clothing for all expressions of gender, whether that's cis-gendered men and women or a more androgynous look.
We want clothing to be comfortable for our clients physically, emotionally and psychologically.
</div>
<br>
** <h3>
What if I can't pay for everything up front?
</h3>**
<div>
We know that custom clothing can be expensive, but it's also an investment in you. That's why we're more than willing to work
with you to devise a payment plan for your custom outfit. We offer 2, 4 and 6-month instalment plans as well as free consultations
for low-income and precarious workers.
</div>
<br>
<br>
<br>
<hr>
<br>
<footer>
<h1>
<div class="magenta"</div>
<p>
<div class="smaller" font-size="0.8em"</div>
</p>
</h1>
<p>©BRICKSxMORTAR, inc. 2018-2020 // 1.888.708.9950 //
<a class="menu"href="mailto:[email protected]"
style="color:magenta"> <u>[email protected]</u></a></p>
</footer>
</div>
</body>
Upvotes: 0
Views: 499
Answers (1)
J Quest
Reputation: 603
So this can easily be done with the following stept;
- Make with css all the needed display:none;, that way they will al be hidden when the page loads.
- Make a click event on the H3 that wil trigger a function
- Make the function to toggle the next div.
Whit this way, when you click on the H3 it will open when it is hidden and it wil hide when it's visible. Very usefully.
HTML:
<h3 class="faq-question">Question 1</h3>
<div class="faq-answer">Answer 1</div>
<h3 class="faq-question">Question 2</h3>
<div class="faq-answer">Answer 2</div>
<h3 class="faq-question">Question 3</h3>
<div class="faq-answer">Answer 3</div>
<h3 class="faq-question">Question 4</h3>
<div class="faq-answer">Answer 4</div>
JavaScript (jQuery)
<script>
$('.faq-question').click(function(){
$(this).next().toggle();
});
</script>
CSS
<style>
.faq-answer {
display:none;
}
</style>
Upvotes: 1