I am writing a civil war journal for my 8th grade Social Studies class and I am presenting it as an HTML file that had the title of each journal and the date. When I click in each entry, it is supposed to open the actual journal entry and close any other open ones. I am having a problem with making the journal entries open up once you click on the journal. Here's my code. (P.S. All of the journal entries aren't finished yet.)
EDIT: Code is working in JSFiddle, but not in the browser.
HTML
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href='journal.css'/>
<title>Pericby Zarby Journal</title>
</head>
<body>
<div id='container'>
<div class='entry current'>
<div class='item row'>
<div class="col-xs-3">
<p class='date'>July 22, 1861</p>
</div>
<div class='col-xs-6'>
<p class='title'>The Battle of Bull Run</p>
</div>
</div>
<div class='description row'>
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<p>As I step through the door of the steel mill, I overhear the conversation that my boss and one of my co-workers are having.
I hear something about a battle and the start of a civil war. I walk by and suddenly my friend Joe runs up to me and says, 'Did ya hear?'
I give him a funny look that shows how confused I am. He proceeds to tell me about the Battle of Bull Run.
He says that a small skirmish between the Union and Confederate armies happened in Virginia. He also says that the Union lost.
That last part really surprises me. The North is supposed to have a lot more men than the South and should have destroyed the South.
Hopefully the rest of the war does not go like this.</p>
</div>
<div class='col-xs-3'> </div>
</div>
</div>
<div class='entry'>
<div class='item row'>
<div class='col-xs-3'>
<p class='date'>December 15, 1862</p>
</div>
<div class='col-xs-6'>
<p class='title'>Fredericksburg</p>
</div>
</div>
<div class='description row'>
<div class='col-xs-3'> </div>
<div class='col-xs-6'>
<p>While I am drinking and talking with some of the other blacks in the 86th regiment, I spot a small man running up to Colonel Smith
and telling him that General Burnside needs reinforcements. Smith shouts for everyone to get into formation and begin marching towards
Fredericksburg. After about an hour of marching I am finally able to see a battlefield, but it does not look pretty.
A group of Union soldiers is charging towards a Confederate barricade. One by one, each soldier is getting killed.
No progress is made by the soldiers. My regiment begins to line up in formation for another charge. As Burnside begins to realize that the
charge before is proving futile he barks a command to retreat. My regiment marches in an orderly fashion back to the nearest Union camp.</p>
</div>
<div class='col-xs-3'> </div>
</div>
</div>
<div class='entry'>
<div class='item row'>
<div class='col-xs-3'>
<p class='date'>January 2, 1863</p>
</div>
<div class='col-xs-6'>
<p class='title'>Emancipation Proclamation</p>
</div>
</div>
<div class='description row'>
<div class='col-xs-3'> </div>
<div class='col-xs-6'>
<p>It’s official. Lincoln has released the Emancipation Proclamation. Slaves from states in rebellion are now free.
Southern plantations won’t let that happen though. No slaves are going to be freed, yet. The best thing about the Emancipation Proclamation
is that now slaves have something to fight for. They will begin to help win this war, in big and small ways.
Also, France and Great Britain can’t help the South anymore because they are slave-free countries.
Lincoln may have just given the Union the boost they need to win this civil war. I know it has given me hope.</p>
</div>
<div class='col-xs-3'> </div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="journal.js"></script>
</body>
</html>
CSS
body {
position: fixed;
background-image: url("http://housedivided.dickinson.edu/grandreview/wp-content/uploads/2010/02/HD_4USCinfantryDetail.preview.jpg");
background-size: cover;
}
#container {
height: 700px;
width: 600px;
border-right: 3px black solid;
border-left: 3px black solid;
border-bottom: 3px black solid;
position: fixed;
margin: 10px auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.row {
margin: 0;
}
.current .item{
background-color: rgba(112,112,112,0.7);
}
.entry {
background-color: rgba(216, 209, 209, 0.7);
border-top: 3px solid black;
}
.item {
cursor: pointer;
padding-top: 7px;
padding-bottom: 18px;
}
.description {
display: none;
padding-top: 10px;
padding-bottom: 10px;
}
.item .date {
margin-left: 20px;
font-weight: bold;
font-style: italic;
}
.item .title {
font-weight: bold;
font-size: 20px;
text-align: center;
}
Javascript
var main = function() {
$('.entry').click(function() {
$('.entry').removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
}
$(document).ready(main);
If you're working locally, you may need to change this line:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Related
I want to display a button in my project and I have created a button.css file that stores all the CSS for creating the button. Initially, I used the whole code from a different source but have managed to copy and paste the css code into the button.css file except the HTML code. I am having issues with the html code and don't know where to paste it in my index.html file. I tried working with it but it would produce a totally different output with just a simple and plain box that says "Check Out My Blogs!"
The HTML Code I want To Paste In My index.html file:
<head>
<link type="text/css" rel="stylesheet" href="css/button.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<div id="container">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">Check Out My Blogs!</span>
</button>
</div>
My Main index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title >Hussain Omer</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-180664536-1">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-180664536-1');
</script>
</head>
<body>
<!-- ======= Mobile nav toggle button ======= -->
<!-- ======= Header ======= -->
<header id="header" class="d-flex flex-column justify-content-center">
<nav class="nav-menu">
<ul>
<li class="active"><i class="bx bx-home"></i> <span>Home</span></li>
<li><i class="bx bx-user"></i> <span>About Me</span></li>
<li><i class="bx bx-file-blank"></i> <span>Resume</span></li>
<li><i class="bx bx-book-content"></i> <span>Projects</span></li>
<li><i class="bx bx-server"></i> <span>Blogs</span></li>
<li><i class="bx bx-server"></i> <span>Skills</span></li>
<li><i class="bx bx-envelope"></i> <span>Contact</span></li>
</ul>
</nav><!-- .nav-menu -->
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex flex-column justify-content-center">
<div class="container" data-aos="zoom-in" data-aos-delay="100">
<h1>Hussain Omer</h1>
<p>I'm a <span class="typed" data-typed-items="Coder, Leader, Team-Player, Blog Writer, Adventurer"></span></p>
<div class="social-links">
<!--<i class="bx bxl-twitter"></i>
<i class="bx bxl-facebook"></i>-->
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/kaustubh-prabhakar/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/SantaKaus" class="github"><i class="bx bxl-github"></i></a>
<a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/h.s.z_11/" class="instagram"><i class="bx bxl-instagram"></i></a>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="about portfolio services">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>My Story</h2>
</div>
<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid">
<div class="portfolio-info">
<h4>Lahore, Pakistan (2003-2010)</h4>
<p>I was born in Lahore, the second largest city of Pakistan. This is where I did most of my education and developed many memories. I enjoyed the very bit of the city; from the diverse culture and to the beautiful greenary. I haven't visited Pakistan in over 5 years, and I hope to go back some day 😀
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid">
<div class="portfolio-info">
<h4>Helsinki, Finland (2007-2010)</h4>
<p>From a very unique and enjoyable Finnish school syst
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid">
<div class="portfolio-info">
<h4>Helsinki, Finland (2007-2010)</h4>
<p>From a very unique and enjoyable Finnish school syst
</div>
</div>
</div>
</div>
</div>
<div class="section-title">
<h2>About ME</h2>
<p>I am a 17 year old with a enthusiastic drive to working with technology, and using my prowess in Computers to make a positive impact on this world. </p>
</div>
<img src="https://mail.google.com/mail/u/1?ui=2&ik=79098a413c&attid=0.1&permmsgid=msg-f:1687893372595235455&th=176c9a145c466a7f&view=att&disp=safe&realattid=176c9a0f10e523984941" align="left" width="370" height="500">
<!-- <div style="display:inline-block;"> to put text under something or start new -->
<div class="aligned">
<div class="p">
<p>Motivated by my love for numbers, I started to explore the many ways I can use my Mathematical knowledge and implement it into different areas. I was introduced to Computer Science in my junior years of high school, and I came to know that I was genuinely passionated about learning it. It offers a holistic approach to solve problems which I admire, and since then, I have transformed my interest into a personal hobby!</p>
<p>I would always like to challenge myself and learn new programming langauges to increase the size of my toolbox. I was inspired by one of my friends to take my programming skills and put it into a good use; thus, I was introduced to competitive programming and large coding events such as hackathons!</p>
<p>The intellectual challenges, creativity, and logic programming offers has always further strengthened the inevitable bond between us.</p>
<p>Challenging myself allows me to not only grow outside my comfort zone, but gives a new perspective towards life, and how there is no limitations/boundaries that halt you from growing! It is everlasting. Once you develop the growth mindset, your journey just never comes to a complete stop! You keep on growing outside your comfort zone, and being able to easily push through any obstacles.</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
</section><!-- End About Section -->
<!-- ======= Facts Section ======= -->
<section id="facts" class="facts">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>What I am upto 😃</h2>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
<h4 class="title">7CUPS.com</h4>
<p class="description">I am currently on the pursuit to make a positive impact on the world. To do this, I started volunteering with 7Cups as a trained listener to support people having emotional distress by interacting with them and resolving any concerns they might have. Especially in these unprecendented times (a.k.a when COVID hit), it is important to guide and support the ones that require additional assistance</p>
</div>
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
<h4 class="title">School Clubs</h4>
<p class="description">Being part of school clubs is personally my favourite thing:) Interacting with people, coming up with ideas and implementing it with various activities is a fun on its own! I am currently an active member of over 5 clubs and hold a Vice-President position at my school's STEM Club. I am also the Technical Team Member for our school's Student Tech Hub</p>
</div>
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
<h4 class="title">Blog Writing</h4>
<p class="description">This is my new favourite thing to do when I am bored:) You may wonder what kind of blogs I write and specifically about what genre I write about. The answer is everything! I write about what is on my mind, and what I learn from my experiences. Basically self-reflections. I also tend to give general advices to people through my blogs!</p>
</div>
</div>
</div>
</div>
</section><!-- End Facts Section -->
</body>
</html>
The html code may look very long but I want the button to be displayed after "This is my new favourite thing to do when I am bored........" which is near the very bottom
So where should the HTML code go for it to display the button right after the line I said above? I tried putting the code after the line but it wouldnt work for some reason. Could you guys please help?
Here is the Button.css file which has the css for my button:
#import url("https://fonts.googleapis.com/css?family=Mukta:700");
* {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
body {
font-family: "Mukta", sans-serif;
font-size: 1rem;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
background: #f3f8fa;
}
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
}
button.learn-more {
width: 12rem;
height: auto;
}
button.learn-more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
right: 25px;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #282936;
border-radius: 1.625rem;
}
button.learn-more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
button.learn-more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
button.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
button.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #282936;
font-weight: 700;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
button:hover .circle {
width: 125%;
}
button:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
button:hover .button-text {
color: #fff;
}
#supports (display: grid) {
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0.625rem;
grid-template-areas: ". main main ." ". main main .";
}
#yes {
grid-area: main;
align-self: center;
justify-self: center;
}
}
I am developing a project for school and I am pretty new to Bootstrap and I keep having some problems with scaling the website for different resolutions. When I change it to mobile the images go on top of the text. If anybody could help me I would appreciate it.
I have tried everything and still cant find a solution.
<body>
<div class="container">
<nav class="navbar-fixed-top sticky-top navbar" style="width: 100%; background-color: white; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);">
<div class="navbar-header">
<a class="navbar-brand"><img src="transferir.png" alt="" style="height: 65; width: 60px"></a>
</div>
<div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Contacta-nos</li>
</ul>
</div>
</nav>
<div class="site-index">
<div id="home" class="block home-block">
<div class="container">
<div class="col-sm-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" class="d-img">
<img src="appstore.png" alt="Apple App Store" class="d-img">
</div>
</div>
<div class="col-sm-5 right-block">
<img src="phones.png" style="height: 350px; float: right; vertical-align: middle; width: auto !important; position: relative">
</div>
</div>
<hr class="sombra">
</div>
</div>
Css
html{
scroll-behavior: smooth;
}
body{
padding-top: 1%;
font-family: 'Lato', sans-serif;
}
.block{
padding: 35px;
}
.home-block{
min-height: calc(100vh - 90px);
}
#home .container{
height: 500px;
}
.left-block{
text-align: center;
top: 30%;
}
.right-block{
bottom: 35%;
margin-left: 25%;
}
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Desktop
When i squish the page
First of all, you probably forgot to include <div class="row"></div> wrapper inside your <div class="container">...</div> element, just as it says here.
Secondly, I strongly recommend you to not play too much with CSS properties such as position: relative/absolute, top: ...; left: ...; right: ...; bottom: ..., because most of them break the CSS native document flow and they should be used only when other tools do not help much.
I suggest you reading this series of articles if you have enough time: CSS layout
I turned off most of the properties of that kind and it already looks much nicer:
This answer would be just be a massive advice if I wouldn't provide some code help, so here it is.
Start by disabling these properties in DevTools:
.home-block{
/* min-height: calc(100vh - 90px); */
}
#home .container{
/* height: 500px; */
}
.left-block{
/* text-align: center; */
/* top: 30%; */
}
.right-block{
/* bottom: 35%; */
/* margin-left: 25%; */
}
Fixing Bootstrap markup:
<div id="home" class="block home-block">
<div class="container">
<!-- Added this wrapper, changed .col-* classes to responsive -->
<div class="row">
<!-- Removed .left-block class -->
<div class="col-sm-12 col-lg-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" style="height: 40px;">
<img src="appstore.png" alt="Apple App Store" style="height: 40px">
</div>
</div>
<!-- Removed .right-block class, added .text-centered class -->
<div class="col-sm-12 col-lg-6 text-centered">
<!-- Removed inline styles (bad practice), changed "height" to be an attribute -->
<img src="phones.png" height="350">
</div>
</div>
</div>
</div>
Then you would get this picture (no interval between image and the button on the top):
This one is solved by applying margin-top: ...px; to the image block, wrapped in #media query at .col-md-* resolutions and lower. For the exact values see Bootstrap grid options. For more info on applying #media queries see MDN docs
As for navigation bar, I first suggest you disabling padding-left on ul#menu element:
#menu {
padding-left: 0;
}
Although it fixes it on sm resolutions, the navigation menu still wraps under the logo on resolutions less than about 520px. I suggest you imagine what to do with this occasion in your mind or in some markup service like https://app.diagrams.net/ and then develop what you decided to.
You can use
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
See this and this
hi I'm doing a website for one of my class projects its nothing fancy but I can't get my variables to define and not sure how to as I'm relatively new to this I've been trying to use different ways to call the variables but they won't define and I'm not sure why I've been using brackets so any help would be greatly appreciated
/*variables used in index.html document*/
var square = document.getElementById("square")
var clickMe = document.getElementById('clickMe');
/*What the button is suppose to do*/
function doDemo() {
var button = this;
square.style.backgroundColor = "#ff4545";
button.setAttribute("diabled", "true");
setTimeout(clearDemo, 2000, button);
}
/*removes the attributes when you click the button again*/
function clearDemo (button) {
var square = document.getElementById("square");
square.style.backgroundColor = "transparent";
button.removeAttribute("diabled");
}
clickMe.onclick = doDemo;
/* color for webpage*/
html{
background: silver;
}
/* setting for heading 1 */
h1{
color: saddlebrown;
font-family: Helvetica, sans-serif;
text-align: center;
font-size: 55px;
}
/* settings for heading 2 */
h2{
font-size: 30px;
color: #D2691E;
font-family: Helvetica, sans-serif;
}
/* settings for the introduction line */
.intro{
text-align: center;
padding-bottom: 1em;
font-family: arial;
margin: auto;
max-width: 1100px;
line-height: 2;
font-size: 20px;
}
/* settings for images */
.shake {
display:block;
margin-left: auto;
margin-right: auto;
width: 30%;
}
/* settings for body structure */
.prime{
padding-bottom: 1em;
font-family: arial;
margin-right: auto;
max-width: 900px
}
#square{
width: 100px;
height: 100px;
border: 2px inset gray;
margin-bottom: 1em;
}
button{
padding: .5em 2em;
}
<!DOCTYPE html>
<!-- will need to make java, and css files and link them-->
<html>
<!--website title and attributes-->
<head>
<title>Milkshakes</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="script.js"></script>
</head>
<!-- make seprate class for each elment here-->
<body>
<h1>Milkshakes</h1>
<!-- the div class for our images-->
<div class="shake">
<img src="images/milkshake_image_1.jpg" alt="image of a chocolate milkshake">
</div>
<!-- our div class for the introduction line-->
<div class="intro">
<p>When the sun is out and the heat is beating down on you there is nothing as good as a nice cool milkshake. they come in many varietys</p>
</div>
<!-- div class for our body structure-->
<div class="prime">
<h2>What is a milkshake</h2>
<!-- intro sentence-->
<p>A milkshake it is a nice cold drink made with milk and a flavor of your choosing and ice cream mixed until its nice and creamy.</p>
<!-- start of body: section 1-->
<h2>History of the milkshake</h2>
<p>It was during the (1870's-1900's) there was 2 diffrent types of shakes a normal shake and a milkshake but they were very different from each other. the first milkshake made used whole milk, vanilla or stawberry and nutmeg and then you span it for 2 to 3 minutes, you get a frothy beverage that was very nice to drink. it is also belived to have started drive throughs.</p>
<p> the way milkshakes use to be mixed was with a mechanical shakers they were built soley for mixing milkshakes and they took 2 to 3 minutes to mix a shake and the original flavours were chocolate, vanilla pineapple and coffee they were the main ones you would find there are others but they werent as common.</p>
<!-- new section begins: section 2-->
<h2>The best flavor of milkshake</h2>
<p>now that is a question not so easily answered as everone has different opinons on which flavor is the best my favorite is chocolate or vanilla depends on my mood but for someone else that could be mint or strawberry so thats all on you as i can not tell you which is the best.</p>
<!-- new section begins: section 3-->
<h2>What is the perfect thickness</h2>
<p>The 3 most common thicknesses you will hear about is thin,regular or thick.
</p>
<!-- are list that we will make collapsable through java-->
<ol>
<li>thin its more of a liquid and light.</li>
<li>regular its a nice consistency of light and thick.</li>
<li>thick which is my personal favorite it more along the lines of just being ice cream and its much heavier then the other 2.</li>
</ol>
<!-- sources for our milkshake stuff-->
<h2>Sources</h2>
<p>
the art of drink:
https://www.artofdrink.com/soda/history-of-the-milkshake</p>
</div>
<!-- our 2nd image-->
<div class="shake">
<img src="images/milkshake_image-2.jpg" width= "400px" alt="2nd image of a milkshake with different topings">
</div>
<div id="square"></div>
<button type="button" id="clickMe">Click Me</button>
</body>
</html>
The most effecient way in modern browsers is to use the defer attribute in your script tag the tag in the head so you could just change your single line of code in the head to:
<script defer type="text/javascript" src="script.js"></script>
Besically this is the best approach because parsing finishes just like when we put the script at the end of the body tag, but overall the script execution finishes well before, because the script has been downloaded in parallel with the HTML parsing. Using defer gives you the best of both worlds: asynchronous loading but it waits until the DOM is ready.
There is a very good article explaining the effeciency of each javascript loading technique in detail. here.
You are trying to locate and reference your HTML elements before they've been parsed in to memory. Move your <script> reference to just before the closing body tag.
In the code below, I've manually inserted the code that you will be referencing, but as long as you keep the script tag where I have it below, you can remove the JavaScript and add the .js reference to the script.
/* color for webpage*/
html{
background: silver;
}
/* setting for heading 1 */
h1{
color: saddlebrown;
font-family: Helvetica, sans-serif;
text-align: center;
font-size: 55px;
}
/* settings for heading 2 */
h2{
font-size: 30px;
color: #D2691E;
font-family: Helvetica, sans-serif;
}
/* settings for the introduction line */
.intro{
text-align: center;
padding-bottom: 1em;
font-family: arial;
margin: auto;
max-width: 1100px;
line-height: 2;
font-size: 20px;
}
/* settings for images */
.shake {
display:block;
margin-left: auto;
margin-right: auto;
width: 30%;
}
/* settings for body structure */
.prime{
padding-bottom: 1em;
font-family: arial;
margin-right: auto;
max-width: 900px
}
#square{
width: 100px;
height: 100px;
border: 2px inset gray;
margin-bottom: 1em;
}
button{
padding: .5em 2em;
}
<!DOCTYPE html>
<!-- will need to make java, and css files and link them-->
<html>
<!--website title and attributes-->
<head>
<title>Milkshakes</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
</head>
<!-- make seprate class for each elment here-->
<body>
<h1>Milkshakes</h1>
<!-- the div class for our images-->
<div class="shake">
<img src="images/milkshake_image_1.jpg" alt="image of a chocolate milkshake">
</div>
<!-- our div class for the introduction line-->
<div class="intro">
<p>When the sun is out and the heat is beating down on you there is nothing as good as a nice cool milkshake. they come in many varietys</p>
</div>
<!-- div class for our body structure-->
<div class="prime">
<h2>What is a milkshake</h2>
<!-- intro sentence-->
<p>A milkshake it is a nice cold drink made with milk and a flavor of your choosing and ice cream mixed until its nice and creamy.</p>
<!-- start of body: section 1-->
<h2>History of the milkshake</h2>
<p>It was during the (1870's-1900's) there was 2 diffrent types of shakes a normal shake and a milkshake but they were very different from each other. the first milkshake made used whole milk, vanilla or stawberry and nutmeg and then you span it for 2 to 3 minutes, you get a frothy beverage that was very nice to drink. it is also belived to have started drive throughs.</p>
<p> the way milkshakes use to be mixed was with a mechanical shakers they were built soley for mixing milkshakes and they took 2 to 3 minutes to mix a shake and the original flavours were chocolate, vanilla pineapple and coffee they were the main ones you would find there are others but they werent as common.</p>
<!-- new section begins: section 2-->
<h2>The best flavor of milkshake</h2>
<p>now that is a question not so easily answered as everone has different opinons on which flavor is the best my favorite is chocolate or vanilla depends on my mood but for someone else that could be mint or strawberry so thats all on you as i can not tell you which is the best.</p>
<!-- new section begins: section 3-->
<h2>What is the perfect thickness</h2>
<p>The 3 most common thicknesses you will hear about is thin,regular or thick.
</p>
<!-- are list that we will make collapsable through java-->
<ol>
<li>thin its more of a liquid and light.</li>
<li>regular its a nice consistency of light and thick.</li>
<li>thick which is my personal favorite it more along the lines of just being ice cream and its much heavier then the other 2.</li>
</ol>
<!-- sources for our milkshake stuff-->
<h2>Sources</h2>
<p>
the art of drink:
https://www.artofdrink.com/soda/history-of-the-milkshake</p>
</div>
<!-- our 2nd image-->
<div class="shake">
<img src="images/milkshake_image-2.jpg" width= "400px" alt="2nd image of a milkshake with different topings">
</div>
<div id="square"></div>
<button type="button" id="clickMe">Click Me</button>
<script>
/*variables used in index.html document*/
var square = document.getElementById("square")
var clickMe = document.getElementById('clickMe');
/*What the button is suppose to do*/
function doDemo() {
var button = this;
square.style.backgroundColor = "#ff4545";
button.setAttribute("diabled", "true");
setTimeout(clearDemo, 2000, button);
}
/*removes the attributes when you click the button again*/
function clearDemo (button) {
var square = document.getElementById("square");
square.style.backgroundColor = "transparent";
button.removeAttribute("diabled");
}
clickMe.onclick = doDemo;
</script>
</body>
</html>
It is recommended to use eventListeners and that will solve the issue
Also you need to make sure you spell things correctly - it is disabled
/*variables used in index.html document*/
let square;
let clickMe;
/*What the button is suppose to do*/
function doDemo() {
square.style.backgroundColor = "#ff4545";
clickMe.setAttribute("disabled", "true");
setTimeout(clearDemo, 2000);
}
/*removes the attributes when you click the button again*/
function clearDemo(button) {
square.style.backgroundColor = "transparent";
clickMe.removeAttribute("disabled");
}
window.addEventListener("load", function() {
square = document.getElementById("square")
clickMe = document.getElementById('clickMe');
clickMe.addEventListener("click", doDemo);
});
/* color for webpage*/
html {
background: silver;
}
/* setting for heading 1 */
h1 {
color: saddlebrown;
font-family: Helvetica, sans-serif;
text-align: center;
font-size: 55px;
}
/* settings for heading 2 */
h2 {
font-size: 30px;
color: #D2691E;
font-family: Helvetica, sans-serif;
}
/* settings for the introduction line */
.intro {
text-align: center;
padding-bottom: 1em;
font-family: arial;
margin: auto;
max-width: 1100px;
line-height: 2;
font-size: 20px;
}
/* settings for images */
.shake {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
}
/* settings for body structure */
.prime {
padding-bottom: 1em;
font-family: arial;
margin-right: auto;
max-width: 900px
}
#square {
width: 100px;
height: 100px;
border: 2px inset gray;
margin-bottom: 1em;
}
button {
padding: .5em 2em;
}
<!DOCTYPE html>
<!-- will need to make java, and css files and link them-->
<html>
<!--website title and attributes-->
<head>
<title>Milkshakes</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="script.js"></script>
</head>
<!-- make seprate class for each elment here-->
<body>
<h1>Milkshakes</h1>
<!-- the div class for our images-->
<div class="shake">
<img src="images/milkshake_image_1.jpg" alt="image of a chocolate milkshake">
</div>
<!-- our div class for the introduction line-->
<div class="intro">
<p>When the sun is out and the heat is beating down on you there is nothing as good as a nice cool milkshake. they come in many varietys</p>
</div>
<!-- div class for our body structure-->
<div class="prime">
<h2>What is a milkshake</h2>
<!-- intro sentence-->
<p>A milkshake it is a nice cold drink made with milk and a flavor of your choosing and ice cream mixed until its nice and creamy.</p>
<!-- start of body: section 1-->
<h2>History of the milkshake</h2>
<p>It was during the (1870's-1900's) there was 2 diffrent types of shakes a normal shake and a milkshake but they were very different from each other. the first milkshake made used whole milk, vanilla or stawberry and nutmeg and then you span it for
2 to 3 minutes, you get a frothy beverage that was very nice to drink. it is also belived to have started drive throughs.</p>
<p> the way milkshakes use to be mixed was with a mechanical shakers they were built soley for mixing milkshakes and they took 2 to 3 minutes to mix a shake and the original flavours were chocolate, vanilla pineapple and coffee they were the main ones
you would find there are others but they werent as common.</p>
<!-- new section begins: section 2-->
<h2>The best flavor of milkshake</h2>
<p>now that is a question not so easily answered as everone has different opinons on which flavor is the best my favorite is chocolate or vanilla depends on my mood but for someone else that could be mint or strawberry so thats all on you as i can not
tell you which is the best.</p>
<!-- new section begins: section 3-->
<h2>What is the perfect thickness</h2>
<p>The 3 most common thicknesses you will hear about is thin,regular or thick.
</p>
<!-- are list that we will make collapsable through java-->
<ol>
<li>thin its more of a liquid and light.</li>
<li>regular its a nice consistency of light and thick.</li>
<li>thick which is my personal favorite it more along the lines of just being ice cream and its much heavier then the other 2.</li>
</ol>
<!-- sources for our milkshake stuff-->
<h2>Sources</h2>
<p>
the art of drink:
https://www.artofdrink.com/soda/history-of-the-milkshake</p>
</div>
<!-- our 2nd image-->
<div class="shake">
<img src="images/milkshake_image-2.jpg" width="400px" alt="2nd image of a milkshake with different topings">
</div>
<div id="square"></div>
<button type="button" id="clickMe">Click Me</button>
</body>
</html>
I need help with closing other panels once I open a click on a different panel. I have been trying to get my head around it for the past week but I'm just not able to.
I don't want to use a jquery library, I want to be able to code this code directly into my website.
I think the javascript code needed is simple in concept but hard to write for someone like me. I still don't exactly understand how javascript commands, functions, etc. work.
Any help or guidance is greatly appreciated!
Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="accordion.css">
</head>
<body>
<h3 class="accordion">Basics of Sailing</h3>
<div class="panel">
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Before Choosing a Sailboat</h4>
<p>Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Car Topping & Trailing</h4>
<p>It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Safety Equipment</h4>
<p>You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.</p>
</div>
</div>
<h3 class="accordion">Basics of Sailing</h3>
<div class="panel">
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Before Choosing a Sailboat</h4>
<p>Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Car Topping & Trailing</h4>
<p>It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Safety Equipment</h4>
<p>You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.</p>
</div>
</div>
<script src="accordion.js"></script>
</body>
</html>
CSS
.accordion {
background-color: #2364aa;
color: #ffffff;
cursor: pointer;
padding: 18px;
border: none;
text-align: left;
outline: none;
font-size: 21px;
transition: 0.4s;
}
.open, .accordion:hover {
background-color: #205A99;
}
.accordion:after {
content: '\f067';
font-family: "Font Awesome 5 Free";
color: #ffffff;
float: right;
font-size: 1.25em;
line-height: 25px;
}
.open:after {
content: "\2212";
}
.panel {
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
.panel-body {
padding: 18px 0;
}
#media only screen and (min-width: 960px) {
.container {
display: table;
box-sizing: border-box;
}
.row .col {
margin: 10px 0;
}
.col {
display: table-cell;
}
.col.middle {
vertical-align: middle;
}
.col-2 {
width: 50%;
padding-right: 72px;
}
.col-4 {
width: 33.33333333333333333%;
padding-right: 72px;
}
}
Javascript
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
Event Delegation
Wrap everything in a block element.
var main = document.querySelector(`main`)
Add an EventListener to that "parent" element
main.addEventListener('click', ....
Now if main or any descendants of main are clicked, a callback function will be invoked. So we have only one EventListener listening for a click event on the behalf of each .accordion. We determine which .accordion was actually clicked by using an if condition and the event.target property.
The rule of mutual exclusivity applies to how an accordion works:
Only one .accordion + .panel combo can have the .active class.
Whenever it's time to change (in this case, e.target (the clicked element) has been clicked), all .accordions will remove the .active class (whether they actually had it or not).
After there are no element with the .active class, you then give it to e.target.
Changes
.accordion + .panel.active instead of .accordion.active.
.style.maxHeight replaced by class .active:
.panel.active {
max-height: 2000px;
height:auto;
overflow: hidden;
transition: 0.2s ease-out;
}
Demo
Details are commented in Demo
// Reference the parent of all .accordion
var main = document.querySelector('main');
/* Register main to click events...
|| when main or any of its descendant elements are clicked...
*/
main.addEventListener("click", function(e) {
/* Collect all .accordion into a NodeList and convert it into
|| an array.
*/
var acc = Array.from(document.querySelectorAll(".accordion"));
/* Loop thru each .accordion to remove the .active class
|| from each .panel
*/
for (let a = 0; a < acc.length; a++) {
var panel = acc[a].nextElementSibling;
panel.classList.remove('active');
}
/* After nothing has class .active, assign .active to the
|| .panel of the clicked element (e.target)
*/
if (e.target !== e.currentTarget) {
var tgt = e.target.nextElementSibling;
tgt.classList.add("active");
}
});
.accordion {
background-color: #2364aa;
color: #ffffff;
cursor: pointer;
padding: 18px;
border: none;
text-align: left;
outline: none;
font-size: 21px;
transition: 0.4s;
}
.open,
.accordion:hover {
background-color: #205A99;
}
.accordion:after {
content: '\f067';
font-family: "Font Awesome 5 Free";
color: #ffffff;
float: right;
font-size: 1.25em;
line-height: 25px;
}
.open:after {
content: "\2212";
}
.panel {
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
.panel.active {
max-height: 2000px;
height:auto;
overflow: hidden;
transition: 0.2s ease-out;
}
#media only screen and (min-width: 960px) {
.container {
display: table;
box-sizing: border-box;
}
.row .col {
margin: 10px 0;
}
.col {
display: table-cell;
}
.col.middle {
vertical-align: middle;
}
.col-2 {
width: 50%;
padding-right: 72px;
}
.col-4 {
width: 33.33333333333333333%;
padding-right: 72px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<h3 class="accordion">Basics of Sailing</h3>
<div class="panel">
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Before Choosing a Sailboat</h4>
<p>Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Car Topping & Trailing</h4>
<p>It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Safety Equipment</h4>
<p>You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.</p>
</div>
</div>
<h3 class="accordion">Basics of Sailing</h3>
<div class="panel">
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Before Choosing a Sailboat</h4>
<p>Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Car Topping & Trailing</h4>
<p>It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Safety Equipment</h4>
<p>You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.</p>
</div>
</div>
<h3 class="accordion">Basics of Sailing</h3>
<div class="panel">
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Before Choosing a Sailboat</h4>
<p>Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Car Topping & Trailing</h4>
<p>It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Safety Equipment</h4>
<p>You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.</p>
</div>
</div>
<h3 class="accordion">Basics of Sailing</h3>
<div class="panel">
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Before Choosing a Sailboat</h4>
<p>Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Car Topping & Trailing</h4>
<p>It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Safety Equipment</h4>
<p>You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.</p>
</div>
</div>
</main>
</body>
</html>
I hope this function helps you
function closeAll() {
var accs = document.querySelectorAll('.accordion');
for(var i = 0; i < accs.length; i ++) {
accs[i].classList.remove('active');
var panel = accs[i].nextElementSibling;
panel.style.maxHeight = null;
}
}
Update We can skip closing clicked element by adding this condition to closeAll function:
if (accs[i] == tar) {
continue;
}
Full code here
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function(ev) {
closeAll(ev.target);
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
function closeAll(tar) {
var accs = document.querySelectorAll('.accordion');
for (var i = 0; i < accs.length; i++) {
if (accs[i] == tar) {
continue;
}
accs[i].classList.remove('active');
var panel = accs[i].nextElementSibling;
panel.style.maxHeight = null;
}
}
.accordion {
background-color: #2364aa;
color: #ffffff;
cursor: pointer;
padding: 18px;
border: none;
text-align: left;
outline: none;
font-size: 21px;
transition: 0.4s;
}
.open,
.accordion:hover {
background-color: #205A99;
}
.accordion:after {
content: '\f067';
font-family: "Font Awesome 5 Free";
color: #ffffff;
float: right;
font-size: 1.25em;
line-height: 25px;
}
.open:after {
content: "\2212";
}
.panel {
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
.panel-body {
padding: 18px 0;
}
#media only screen and (min-width: 960px) {
.container {
display: table;
box-sizing: border-box;
}
.row .col {
margin: 10px 0;
}
.col {
display: table-cell;
}
.col.middle {
vertical-align: middle;
}
.col-2 {
width: 50%;
padding-right: 72px;
}
.col-4 {
width: 33.33333333333333333%;
padding-right: 72px;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="accordion.css">
</head>
<body>
<h3 class="accordion">Basics of Sailing</h3>
<div class="panel">
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Before Choosing a Sailboat</h4>
<p>Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Car Topping & Trailing</h4>
<p>It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Safety Equipment</h4>
<p>You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.</p>
</div>
</div>
<h3 class="accordion">Basics of Sailing</h3>
<div class="panel">
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Before Choosing a Sailboat</h4>
<p>Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Car Topping & Trailing</h4>
<p>It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Safety Equipment</h4>
<p>You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.</p>
</div>
</div>
<script src="accordion.js"></script>
</body>
</html>
This is a class called Accordion in Vanilla js. It mostly shows the functionality in javascript , style is not good :)
class Accordion {
constructor(AccordionData) {
// State
this.data = AccordionData;
// View Layer
this.mainContainer = document.querySelector('.container');
this.allAccordionDetailsElements = [];
this.init();
}
init() {
this.createAccordions();
this.bindEvents();
}
createAccordions() {
this.data.forEach(acc => {
let accordionHTML = this.generateHTML(acc);
this.mainContainer.appendChild(accordionHTML);
});
this.allAccordionDetailsElements = document.querySelectorAll('.accordion-details');
}
checkIfCurrentTarget(targetEl, detailsEl) {
return detailsEl.dataset.target === targetEl.id;
}
getDisplayStatus(element) {
return element.style.display;
}
toggleDetailsVisibility(detailsEl) {
const isVisible = this.getDisplayStatus(detailsEl) === 'block';
if (!isVisible) {
detailsEl.style.display = 'block';
} else {
detailsEl.style.display = 'none';
}
}
hideAllDetails() {
this.allAccordionDetailsElements.forEach(detailsSection => {
detailsSection.style.display = 'none';
});
}
bindEvents() {
this.mainContainer.addEventListener('click', (e) => {
if (typeof e === 'undefined') return;
const targetEl = e.target;
const isAccordionHeader = targetEl.classList.contains('accordion-header');
if (isAccordionHeader) {
this.hideAllDetails();
this.allAccordionDetailsElements.forEach(detailsSection => {
if (this.checkIfCurrentTarget(targetEl, detailsSection)) {
this.toggleDetailsVisibility(detailsSection)
}
});
}
});
}
generateHTML(accordionElData) {
const { id, headerText, detailsText } = accordionElData;
const sectionEl = document.createElement('section');
sectionEl.className = 'accordion-container';
const headerEl = document.createElement('button');
headerEl.type = 'button';
headerEl.className = 'accordion-header';
headerEl.textContent = headerText;
headerEl.id = id;
const articleEl = document.createElement('article');
articleEl.className = 'accordion-details';
articleEl.textContent = detailsText;
articleEl.dataset.target = id;
sectionEl.appendChild(headerEl);
sectionEl.appendChild(articleEl);
return sectionEl;
}
}
const AccordionData = [
{
id: 'acc-1',
headerText: 'Section 1',
detailsText: 'This is dummy Text for Section 1'
},
{
id: 'acc-2',
headerText: 'Section 2',
detailsText: 'This is dummy Text for Section 2'
},
{
id: 'acc-3',
headerText: 'Section 3',
detailsText: 'This is dummy Text for Section 3'
}
];
window.addEventListener('DOMContentLoaded', () => {
const accordion = new Accordion(AccordionData);
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.accordion-details {
display: none;
}
<main class="container"></main>
NB
My Header:
<header>
<div style="float:left;margin-left:20px;">
<div style="float:left; margin-left:10px;margin-top:55px;background-color:#2BC3A7; height:3px; width:200px;"> </div>
<div style="clear:both;float:left;"></div>
<div style="float:left; margin-left:10px;margin-top:5px;font-family:DIN; font-size:12pt;color:#2BC3A7;">Services/Products</div>
</div>
</div>
</header>
I have 2 divs:
<div id="#content1">
<div id="divWelcome" style="margin-top:50px;">
<div id="headerimg" style="position: relative;">
<div style="position: absolute; bottom:255px; left: 20px; width: 550px; font-family:DIN; font-size:23pt; font-weight:600; color: white; letter-spacing:0.01em;">
We offer Cloud solutions for small businesses to help them manage their workflow requirements
</div>
<hr style="height:6px;position: absolute; bottom:210px; left: 20px; width: 490px;"/>
<div style="position: absolute; bottom:175px; left: 20px; width: 550px; font-family:DIN; font-size:14pt; font-weight:500; color: white; letter-spacing:0.01em;">
Our core sectors of expertise are professional services, data management and outsourcing.
</div>
</div>
<div id="divAboutContents" style="margin-top:50px; background-color:red;position: relative;display: none;">
</div>
</div>
</div>
So when the page loads the 1st div shows. The effect I want is when the user presses a button the divFirst gently fades away and the divSecond gently fades in. I have used this bit of jQuery but the affect does not look very pleasing.
<script type="text/javascript">
$(document).ready(function () {
$("#divAbout").click(function () {
$("#headerimg").fadeOut();
$("#divAboutContents").fadeIn();
});
});
</script>
What else can I try/read up on? Thanks
NB
This is part of my CSS
#content1 {
clear: both;
position: absolute;
}
Also I was fading the other one out. just forgot to put it in the question. The affect I get is 'clunky'
'Pleasing' is a very subjective term, however to improve it you could place both div elements within a parent container positioned absolutely so they overlap. You can then fadeToggle() between the two as needed. Something like this:
$('#container').click(function() {
$(this).find('div').fadeToggle();
})
#container > div {
position: absolute;
}
#divSecond {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="divFirst">some content with images</div>
<div id="divSecond">different content with images</div>
</div>
Click the text to see the fade transition in action.