Ich möchte alles Folgende mit jQuery machen und mein HTML sowie CSS sind unten.
jQuery(document).ready(function () {
jQuery('.contentBox').css('display', 'none');//SELECT BY CLASS
$('h2').click(function(){
$(this).next('p').slideToggle();
});
});body {
background: tan;
}
h1 {
margin-left: 150px;
}
h2 {
margin-bottom: 2px;
padding: 3px 0 2px 25px;
background: #D99E50;
}
p {
margin-top: 0;
padding-top: 0;
}
#mainContain {
background: #523C1E;
width: 80%;
margin: 0 auto;
padding: 30px 0;
}
.contentBox {
background: #524737;
/*Paragraph background color*/
padding: 15px;
color: #FFE5C3;
/*Paragraph font colour*/
}
/*Text Panel Styling*/
.panelContainer {
background: #523C1E;
width: 80%;
margin: 0 auto;
}<!doctype html>
<html lang="en">
<head>
<!--ADD jQUERY FIRST!-->
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="lab10-1-jquery.js"></script>
<link rel="stylesheet" href="lab10-1-jquery.css" />
<meta charset="utf-8" />
<title>jQuery FAQ Page</title>
</head>
<body>
<h1 id="headTitle">Frequently Asked Questions</h1>
<div id="mainContain">
<!--MAIN CONTENT CONTAINER-->
<div class="panelContainer">
<!-- 1ST PANEL-->
<h2 id="h21">Do I need a website?</h2>
<p class="contentBox">Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum
consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum
rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis dignissim tempus, nibh sem faucibus
nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio.
Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum
quam. Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor,
malesuada eget bibendum a, lacinia ac ante.</p>
</div>
<div class="panelContainer">
<!-- 2ND PANEL-->
<h2>What is SEO?</h2>
<p class="contentBox">Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est,
dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi
tincidunt lobortis libero et placerat. Pellentesque dignissim diam laoreet, ultricies ligula aliquam,
consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum
convallis. Sed eget magna enim.</p>
</div>
<div class="panelContainer">
<!-- 3RD PANEL-->
<h2>What is a content management system?</h2>
<p class="contentBox">Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum
consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum
rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis dignissim tempus, nibh sem faucibus
nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio.
Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum
quam. Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor,
malesuada eget bibendum a, lacinia ac ante.</p>
</div>
<div class="panelContainer">
<!-- 4TH PANEL-->
<h2>Do I need a blog?</h2>
<p class="contentBox">Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est,
dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi
tincidunt lobortis libero et placerat. Pellentesque dignissim diam laoreet, ultricies ligula aliquam,
consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum
convallis. Sed eget magna enim.</p>
</div>
</div>
<!--END mainContain-->
</body>
</html>Lösung des Problems
Während Sie die Punkte 1 und 2 anscheinend bereits erreicht haben, ist der einfachste Weg, die Punkte 3-5 zu erreichen, wie folgt, mit erklärendem Code in den Kommentaren:
jQuery(document).ready(function() {
jQuery('.contentBox').css('display', 'none');
$('h2').click(function() {
$(this).next('p')
// to address point 3: here we supply a 'duration' argument
// of 3000; this is in milliseconds, so this is equal to 3 seconds:
.slideToggle(3000);
});
});// caching the values as CSS custom properties
// you wish to use as the color, and background-
// color, of the p.contentBox elements:
:root {
--color: #FFE5C3;
--bgColor: #524737;
}
body {
background: tan;
}
h1 {
margin-left: 150px;
}
h2 {
margin-bottom: 2px;
padding: 3px 0 2px 25px;
background: #D99E50;
}
p {
margin-top: 0;
padding-top: 0;
}
#mainContain {
background: #523C1E;
width: 80%;
margin: 0 auto;
padding: 30px 0;
}
.contentBox {
/* to address point 5 (and point 4), here we set
the default color of the element(s), using the
CSS var() function to supply thevalue held in
the named custom property: */
background-color: var(--bgColor);
/* And again: */
color: var(--color);
padding: 15px;
}
.contentBox:hover {
/* for point 4: here we do the same, yet again, but
reverse the properties, so the color is now set
to the color of the '--bgColor' custom property: */
color: var(--bgColor);
/*...and the background-color is set to the value
of the '--color' custom property: */
background-color: var(--color);
}
/*Text Panel Styling*/
.panelContainer {
background: #523C1E;
width: 80%;
margin: 0 auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="headTitle">Frequently Asked Questions</h1>
<div id="mainContain">
<!--MAIN CONTENT CONTAINER-->
<div class="panelContainer">
<!-- 1ST PANEL-->
<h2 id="h21">Do I need a website?</h2>
<p class="contentBox">Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis dignissim tempus, nibh sem faucibus nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio. Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum quam. Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor, malesuada eget bibendum a, lacinia ac ante.</p>
</div>
<div class="panelContainer">
<!-- 2ND PANEL-->
<h2>What is SEO?</h2>
<p class="contentBox">Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est, dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi tincidunt lobortis libero et placerat. Pellentesque dignissim diam laoreet, ultricies ligula aliquam, consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum convallis. Sed eget magna enim.</p>
</div>
<div class="panelContainer">
<!-- 3RD PANEL-->
<h2>What is a content management system?</h2>
<p class="contentBox">Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis dignissim tempus, nibh sem faucibus nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio. Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum quam. Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor, malesuada eget bibendum a, lacinia ac ante.</p>
</div>
<div class="panelContainer">
<!-- 4TH PANEL-->
<h2>Do I need a blog?</h2>
<p class="contentBox">Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est, dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi tincidunt lobortis libero et placerat. Pellentesque dignissim diam laoreet, ultricies ligula aliquam, consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum convallis. Sed eget magna enim.</p>
</div>
</div>
Keine Kommentare:
Kommentar veröffentlichen