This is just a theory based question. I am fairly new to programming and was wondering why this happens within HTML.
I'm making an HTML based resume where when I have a mouse pointer hover over my ul it will activate a function such as this.
$("li#about").hover(function(){
$("#content1").toggle();
});
The Issue While hovering over my selector when my #content was no longer hidden, my margins between my header and ul box would cause jittering within the page.
I went from:
<header>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
</header>
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span> </li>
<li id='education'> <span>Education</span></li>
<li id='info'> <span>Experience</span></li>
<li id='ref'> <span>References</span></li>
</ul>
<div class="clr"></div>
</div>
to:
<header>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span> </li>
<li id='education'> <span>Education</span></li>
<li id='info'> <span>Experience</span></li>
<li id='ref'> <span>References</span></li>
</ul>
<div class="clr"></div>
</div>
</header>
My questions:
What was the reason for the sporadic jittering and how did wrapping my ul within the header tag prevent this from occurring?
Is my solution proper etiquette? If not, what would you recommend?
If you have any good recommendations for coding etiquette please post links in comments.
sing-song Being new, I know my code must look like poo. Regardless I added a fiddle for you.
Thanks for the read! I apologize in advance for the ugly code. I posted a JSFiddle as well, figured it would help any other newbies to conceptualize what i'm asking. This fiddle is without correction Just change the closing header tag to where I specified above to see the results.
My Fiddle: https://jsfiddle.net/dgibbins1/cwn6ws02/4/
header{
background: #5a4c1c;
border-radius:10px;
opacity:0.85;
padding:1px 0;
}
h1{
margin: 0 0;
color: white;
padding-left:10px;
}
h3{
color:#dad6c7;
padding-left: 31px;
}
body{
background:#dad6c7;
}
ul{
list-style-type:none;
padding: 0px 15px;
margin: 50px 0;
}
span{
color:white;
}
li{
font-family:Helvetica;
}
div.column{
border-style:solid;
border-color:rgba(56,43,3,1);
}
#content1, #content2,#content3,#content4{
opacity:1;
display: none;
padding: 3px auto;
}
.clear-fix{
}
.column li{
padding:4px 0 4px 0;
margin-top:30px;
margin-bottom:30px;
font-family:'Oswald', sans-serif;
text-align: center;
font-size: 20px;
overflow: hidden;
}
.clr{
clear:both;
font-size:0;
}
.column{
float:left;
background-size: 220px 220px;
background:#5a4c1c;
padding: 5px 2px;
margin: 10px 10px 0 0;
opacity:0.5;
width: 15%;
border-radius:20px;
}
.column li:hover{
background: black;
border-radius:20px;
}
.content{
color:#5a4c1c;
font-weight: bold;
font-family: helvetica;
width:85%;
}
.footer{
text-align: center;
background:#5a4c1c;
color: white;
padding: 10px 0;
opacity: 0.5;
margin-top: 30%;
border-radius:10px;
}
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="/normalize.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<title> Resume: Ryan Anderson</title>
</head>
<header>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
</header>
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span> </li>
<li id='education'> <span>Education</span></li>
<li id='info'> <span>Experience</span></li>
<li id='ref'> <span>References</span></li>
</ul>
<div class="clr"></div>
</div>
<div id="content1" class="content show-description">
<p>About me <br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content2" class="content" >
<p>Education <br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content3" class="content">
<p>Experience <br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content4" class="content">
<p>References <br />
Paul Garven (co-worker): (780)-828-1111<br />
Paul CWC (owner of CWWC): (416)- 721-1111<br />
Someone at Bitmaker: (416-967-11-11
</p>
</div>
</div>
<div class="footer">
<p>Contact <br/>
<small>mobile: (647)-333-8723 <br/>
e-mail: hotmail#gmail.com</small>
</p>
</div>
<script>
$("li#about").hover(function(){
$("#content1").toggle();
});
$("li#education").hover(function() {
$("#content2").toggle();
});
$("li#info").hover(function() {
$("#content3").toggle();
});
$("li#ref").hover(function() {
$("#content4").toggle();
});
</script>
</body>
You have an error in your CSS.
#content1, #content2,#content3,#content4{
opacity:1;
display: none;
padding: 3px auto; <--
}
padding doesn't take the value auto.
Switch it to padding-top:3px; padding-bottom:3px; and the jittering will stop.
Link: Working proof
you have some issues with your markup
some of your nesting is applied incorrectly.
in fact i am not even sure i found all the errors
some of your css is incorrect as well
$("li#about").hover(function() {
$("#content1").toggle();
});
$("li#education").hover(function() {
$("#content2").toggle();
});
$("li#info").hover(function() {
$("#content3").toggle();
});
$("li#ref").hover(function() {
$("#content4").toggle();})
header {
background: #5a4c1c;
border-radius: 10px;
opacity: 0.85;
padding: 1px 0;
}
.minheight {
min-height: 200px;
}
h1 {
margin: 0 0;
color: white;
padding-left: 10px;
}
h3 {
color: #dad6c7;
padding-left: 31px;
}
body {
background: #dad6c7;
}
ul {
list-style-type: none;
padding: 0px 15px;
margin: 50px 0;
}
span {
color: white;
}
li {
font-family: Helvetica;
}
div.column {
border-style: solid;
border-color: rgba(56, 43, 3, 1);
}
#content1,
#content2,
#content3,
#content4 {
opacity: 1;
display: none;
padding: 3px auto;
}
.clear-fix {
}
.column li {
padding: 4px 0 4px 0;
margin-top: 30px;
margin-bottom: 30px;
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 20px;
overflow: hidden;
}
.clr {
clear: both;
font-size: 0;
}
.column {
float: left;
background-size: 220px 220px;
background: #5a4c1c;
padding: 5px 2px;
margin: 10px 10px 10px 0;
opacity: 0.5;
width: 20%;
min-width:134px;
border-radius: 20px;
}
.column li:hover{
background: black;
border-radius: 20px;
}
.content {
color: #5a4c1c;
font-weight: bold;
font-family: helvetica;
width: 85%;
}
.footer {
text-align: center;
background: #5a4c1c;
color: white;
padding: 10px 0;
opacity: 0.5;
margin-top: 30%;
border-radius: 10px;
clear:both;
}
<link href="//normalize-css.googlecode.com/svn/trunk/normalize.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span>
</li>
<li id='education'> <span>Education</span>
</li>
<li id='info'> <span>Experience</span>
</li>
<li id='ref'> <span>References</span>
</li>
</ul>
<div class="clr"></div>
</div>
<div id="content1" class="content show-description">
<p>About me
<br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content2" class="content">
<p>Education
<br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content3" class="content">
<p>Experience
<br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content4" class="content">
<p>References
<br />Paul Garven (co-worker): (780)-828-1111
<br />Paul CWC (owner of CWWC): (416)- 721-1111
<br />Someone at Bitmaker: (416-967-11-11
</p>
</div>
</div>
<div class="footer">
<p>Contact
<br/>
<small>mobile: (647)-333-8723 <br/>
e-mail: hotmail#gmail.com</small>
</p>
</div>
</body>
Related
First of all, sorry for my bad English, hope you understand me.
Second, I started programing yesterday, wathed lots of tutorials and didn't found anything, probably I am just dumb.
Just begun a new html project, I started with a colored bar for the top of the website, then linked an image to the main html project, something like Home navigation bar image idk.
Now the problem is, I want to overlap the already linked to main html to colored bar (https://i.stack.imgur.com/iVqm3.png)
Bluebar CSS code:
.upperblue {
width: 100%;
background-color: rgb(71, 103, 245);
height: 100px;
position: relative;
}
Image HTML and CSS
<p id="homeimage">
<a href="/index.html">
<img `src="https://lh3.googleusercontent.com/EiXgCES3j3b98a6ADBoU37yzcAO1shECNmOzbCZn2HYcUBPW4xiFmCHsXCy-A`mWGTn5ySEU3U-Rpq2H_NrXjjuSg-Qrr3m74XSVF0y9VD6ayXRy2zYaTVqONCjlneaMfsb352Z0S=w2400" height="185"
width="426">
</a>
</p>
I made a example here, i import some fonts , a bunch of CSS selectors . Start studing , ctrl + shift + i on chrome was a good tool for you test it all !!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- IMPORTING GOOGLE MATERIAL FONT ICONS (https://fonts.google.com/icons) -->
<!--
How to use it :
Place the .material-symbols-outlined class in some element that have text (div,span,p,li,table,footer,header,etc..)
I think that it only dont work like inputs, textarea elements
Found some icon : [eg: https://fonts.google.com/icons?icon.query=menu]
Click and copy the example that show right in the page .
example :
<span class="material-symbols-outlined">menu</span>
-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0" />
<!-- IMPORTING POPPINS FONT FROM GOOGLE FONTS (https://fonts.google.com/) -->
<!--
How to use it :
On the google page , well on the up-right side on the page have an button : 'View selected families'
(Its a icon actually, you will not see the text XD)
Click there and you will see how to use each font
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
outline: none;
font-family: 'system-ui', 'sans-serif';
font-weight: 300;
transition: .3s linear 0s all;
}
h1 , h2 ,h3 , h4, h5 {
font-weight: 500;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.8rem;
}
h3 {
font-size: 1.6rem;
}
h4 {
font-size: 1.4rem;
}
h5 {
font-size: 1.2rem;
}
h6 {
font-size: 1.1rem;
}
body {
margin: 0;
}
main {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
/* NOTE THAT HERE WE USE 2REM IN THE SIZE OF ASIDE ICONS , BECAUSE IS THEIR SIZE ON .header-icon ;D */
main > header {
flex: 0 0 50px;
display: grid;
grid-template-columns: 2rem auto 2rem;
justify-items: center;
align-items: center;
background: linear-gradient(45deg, #e7e7e7, #b9b9b9);
border-bottom: 1px solid #b5b5b5;
}
main > header > div:nth-child(1) {
margin: 0;
}
main > header > div:nth-child(2) {
margin: 0;
}
main > header > div:nth-child(3) {
margin: 0;
}
main > section {
flex: 1 0 auto;
padding: 10px;
background: #f1f1f1;
}
main > section > div:nth-child(1) {
width: 100%;
height: 100%;
border-radius: 10px;
padding: 10px;
background: white;
}
main > section > div:nth-child(1) > p {
margin-top: 10px;
}
main > footer {
flex: 0 0 10vmin;
display: grid;
grid-template-columns: auto auto auto;
justify-items: center;
border-top: 1px solid #ffffff82;
background: #e7e7e7;
}
main > footer > div:nth-child(1) {
margin: 0;
}
main > footer > div:nth-child(2) {
margin: 0;
}
main > footer > div:nth-child(3) {
margin: 0;
}
/* SEE THAT , WE CAN TURN OUR ICON BIGGER SETTING A FONT-SIZE PROPERTY !! ALSO OTHER OPTIONS*/
.header-icon {
font-size: 2rem;
}
/* ALSO NOTE THE CSS SELECTORS IM USING ...*/
a.normal {
color: black;
text-shadow: 0px 0px 1px black;
transition: .1s linear 0s text-shadow;
}
a.normal:hover {
text-shadow: 0px 0px 2px black;
}
a.button {
display: block;
border-radius: 6px;
color: white;
font-weight: 500;
text-align: center;
text-shadow: 1px 1px grey;
border: 1px solid gray;
background: #c1c1c1;
padding: 4px 14px;
transform: translate(0px, 0px);
transition: .1s linear 0s all;
}
a.button:hover {
transform: translate(1px, -1px);
box-shadow: 0px 0px 3px -1px #00000069;
}
button.sucess {
border-radius: 6px;
background: green;
color: white;
padding: 2px 10px;
border: 0;
}
</style>
</head>
<body>
<main>
<header>
<!-- Using google materials icons font with a custom class !! the default class need to be here !!-->
<div><span class="header-icon material-symbols-outlined">menu</span></div>
<div><h3>LOGO</h3></div>
<div><span class="header-icon material-symbols-outlined">toggle_on</span></div>
</header>
<section>
<div>
<h5>Main content</h5>
<p>
Lorem ipsum dolor sit amet. Est internos galisum ut adipisci voluptas qui ipsum quisquam aut dicta assumenda ut iste velit sit quia quasi id sequi fugiat. Et autem veniam eum alias optio et quas tenetur aut aperiam dolorem est soluta laboriosam non cupiditate officiis qui neque consequatur. Est ipsam numquam sit nobis iure quo assumenda quidem ut voluptatem accusamus rem consequatur nesciunt eum deserunt accusamus ad eaque explicabo. Hic quam facilis et dolorum galisum ut dolorum aliquid ad dolorem sapiente in aspernatur nemo sed veritatis maxime non dolorem quisquam.
A nemo voluptas a repellat iste ut harum dolor aut neque dolorum nam voluptatibus amet quo repellat autem et quasi nemo. Vel temporibus adipisci nam nesciunt quidem aut voluptas placeat in accusantium sunt ut laborum illum a esse quia aut doloribus molestiae. Ut sint nemo non odit autem ea optio repudiandae et sequi nostrum.
Aut culpa cumque qui repellendus earum aut dolores labore et velit ullam eum ratione culpa ut nemo repellat in dolorum eius. Et cupiditate maxime eos officiis animi eos architecto quam aut ipsa inventore. Ad quos sint ex cumque quis eum officiis harum qui culpa soluta eos optio omnis ut voluptatem accusamus aut ratione fugit. Et inventore vero ab eligendi debitis sit tempore dicta nam voluptatem nostrum.
</p>
Link
Link
<button class="sucess">Button</button>
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="checkbox" name="" id="myCheckbox"><label for="myCheckbox"></label>
<input type="date" name="" id="">
<input type="file" name="" id="">
<input type="number" name="" id="">
<input type="password" name="" id="">
<input type="search" name="" id="">
<input type="radio" name="" id="">
</div>
</section>
<footer>
<div>FOOTER 1</div>
<div>FOOTER 2</div>
<div>FOOTER 3</div>
</footer>
</main>
</body>
<script>
let modalLinks = document.querySelectorAll('a[data-modal]');
modalLinks.forEach(link =>
link.addEventListener('click', function() {
openModal(link)
})
);
function openModal(e) {
const el = e.closest('.card');
const modal = el.querySelector('[modal]');
modal.setAttribute('modal', 'active');
}
function closeModal(e) {
const modal = e.closest('[modal]');
modal.setAttribute('modal', '');
}
</script>
</html>
CSS SELECTORS // HTML TUTORIAL
I'm trying to create an accordion,it is almost fine but what i cant acheive that everytime when i reload the page the first accordion should be open by default.
second is that im using ajax,after ajax what do i need that the same accordion that i click before the ajax accordion also stay open
Now the first accordion is open what i wanna acheive that when i click the second or any other accordion it should close.
const acc_btns = document.querySelectorAll(".accordion-header");
const acc_contents = document.querySelectorAll(".accordion-body");
acc_btns.forEach((btn) => {
btn.addEventListener("click", (e) => {
acc_contents.forEach((acc) => {
if (
e.target.nextElementSibling !== acc &&
acc.classList.contains("active")
) {
acc.classList.remove("active");
acc_btns.forEach((btn) => btn.classList.remove("active"));
}
});
const panel = btn.nextElementSibling;
panel.classList.toggle("active");
btn.classList.toggle("active");
});
});
window.onclick = (e) => {
if (!e.target.matches(".accordion-header")) {
acc_btns.forEach((btn) => btn.classList.remove("active"));
acc_contents.forEach((acc) => acc.classList.remove("active"));
}
};
.accordion {
width: 450px;
margin: 0 auto;
overflow: hidden;
border-radius: 4px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.accordion-header {
display: flex;
justify-content: space-between;
padding: 0.75rem 1rem;
width: 100%;
background: #1f8dd6;
border: none;
outline: none;
border-bottom: 1px solid #54a0ff;
color: #f3f3f3;
cursor: pointer;
}
.accordion-header.active {
background-color: #1070b1;
}
.accordion-header.active i {
transform: rotate(180deg);
transition: all 0.3s ease-in-out;
}
.accordion-body {
padding: 0 1rem;
background-color: #f3f3f3;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.accordion-body.active {
max-height: 10rem;
padding: 1rem;
}
.accordion-body.open {
max-height: 10rem;
padding: 1rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<div class="accordion">
<div class="accordion-item">
<button class="accordion-header">
<strong>Accordion 1</strong><i class="fas fa-angle-down"></i>
</button>
<div class="accordion-body open">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis atque, voluptates minima quod quisquam et quasi debitis officia non illo harum iure eos reprehenderit quaerat, veritatis asperiores facilis qui neque.
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">
<strong>Accordion 2</strong><i class="fas fa-angle-down"></i>
</button>
<div class="accordion-body">
Dignissimos perspiciatis amet, qui soluta aliquid, ipsa ea alias quidem officiis vel, inventore quod labore aspernatur exercitationem fugit explicabo rerum dolores quo unde assumenda reprehenderit vero temporibus? Magni, nesciunt vero?
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">
<strong>Accordion 3</strong><i class="fas fa-angle-down"></i>
</button>
<div class="accordion-body">
Amet fuga ipsum velit, quae illo doloremque? Id quidem harum placeat porro ipsam, animi voluptatem vel mollitia, quae rerum suscipit modi at consequatur ipsum vitae cum aspernatur itaque non quam?
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">
<strong>Accordion 4</strong><i class="fas fa-angle-down"></i>
</button>
<div class="accordion-body">
Nihil consectetur ipsum nobis eligendi facilis sed corrupti, ab fugit ducimus dolorem rem nulla excepturi impedit sint ea, eveniet provident quos repudiandae a quas reiciendis aut, incidunt corporis? Laboriosam, labore.
</div>
</div>
</div>
Somehow i ll be able to figure it out.
const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");
accordionItemHeaders.forEach(accordionItemHeader => {
accordionItemHeader.addEventListener("click", event => {
// Uncomment in case you only want to allow for the display of only one collapsed item at a time!
const currentlyActiveAccordionItemHeader = document.querySelector(".accordion-item-header.active");
if(currentlyActiveAccordionItemHeader && currentlyActiveAccordionItemHeader!==accordionItemHeader) {
currentlyActiveAccordionItemHeader.classList.toggle("active");
currentlyActiveAccordionItemHeader.nextElementSibling.style.maxHeight = 0;
}
accordionItemHeader.classList.toggle("active");
const accordionItemBody = accordionItemHeader.nextElementSibling;
if(accordionItemHeader.classList.contains("active")) {
accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
}
else {
accordionItemBody.style.maxHeight = 0;
}
});
});
accordionItemHeaders[0].click();
#import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: #34495e;
color: #fff;
}
h1 {
text-align: center;
margin: 2rem 0;
font-size: 2.5rem;
}
.accordion {
width: 90%;
max-width: 1000px;
margin: 2rem auto;
}
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.5rem;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-item-header::after {
content: "\002B";
font-size: 2rem;
position: absolute;
right: 1rem;
}
.accordion-item-header.active::after {
content: "\2212";
}
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
border-top: 1px solid;
border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}
#media(max-width:767px) {
html {
font-size: 14px;
}
}
<h1>FAQ</h1>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-item-header">
What is Web Development?
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
Web Development broadly refers to the tasks associated with developing functional websites and applications for the Internet. The web development process includes web design, web content development, client-side/server-side scripting and network security configuration, among other tasks.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
What is HTML?
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
HTML, aka HyperText Markup Language, is the dominant markup language for creating websites and anything that can be viewed in a web browser.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
What are some basic technical skills of a Front-End developer?
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
<ul style="padding-left: 1rem;">
<li>HTML, CSS, JavaScript</li>
<li>Frameworks (CSS and JavaScript frameworks)</li>
<li>Responsive Design</li>
<li>Version Control/Git</li>
<li>Testing/Debugging</li>
<li>Browser Developer Tools</li>
<li>Web Performance</li>
<li>SEO (Search Engine Optimization)</li>
<!-- <li>CSS Preprocessing</li> -->
<li>Command Line</li>
<li>CMS (Content Management System)</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
What is HTTP?
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
HTTP, aka HyperText Transfer Protocol, is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
What is CORS?
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
CORS, aka Cross-Origin Resource Sharing, is a mechanism that enables many resources (e.g. images, stylesheets, scripts, fonts) on a web page to be requested from another domain outside the domain from which the resource originated.
</div>
</div>
</div>
</div>
So this div doesn't respond when I click on the h3 inside it or on the span
I used flex box in the "question-title" div, I guess that what causes the problem, is there a way I can make this div showing more/less when I click on it, not specifically outside h3 and the span, because it only works when I click in the space between h3 and the span.
let downBtn = document.querySelectorAll(".main-question .question-title");
downBtn.forEach(dbtn => {
dbtn.addEventListener("click", (e)=> {
let paragraphElement = e.target.parentNode.querySelector("p");
paragraphElement.classList.toggle("showHide");
let spanSign = dbtn.querySelector("span");
if (paragraphElement.classList.contains("showHide")) {
spanSign.innerHTML = "--";
} else {
spanSign.innerHTML = "+";
}
});
});
.question {
width: 60%;
margin: 0 auto;
}
.part-one h3 {
color: var(--main-color);
font-size: 30px;
margin: 0 0 20px;
}
.main-question {
margin: 20px auto;
padding: 20px;
text-align: center;
border: 1px solid rgb(207, 207, 207);
border-radius: 6px;
position: relative;
overflow: hidden;
}
.main-question h4 {
margin: 0;
color: #607d8b;
}
.main-question h4::selection {
background-color: transparent;
}
.main-question p {
margin: 34px 0 0;
text-align: justify;
color: var(--main-color2);
display: none;
}
.main-question p.showHide {
display: block;
}
.question-title {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
height: 20%;
width: 100%;
background-color: #EEE;
padding: 20px;
}
.question-title span {
font-size: 20px;
font-weight: bold;
color: #607d8b;
letter-spacing: -3px;
}
.question-title span::selection {
background-color: transparent;
}
<!-- Start questions -->
<div class="container">
<div class="question">
<div class="part-one">
<h3>Some Frequent Questions</h3>
<div class="main-question">
<div class="question-title">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
<span>+</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum fugiat ullam molestias dignissimos deleniti inventore aspernatur nam excepturi vitae nihil, temporibus accusantium tempore deserunt error libero, itaque earum sapiente sequi.</p>
</div>
<div class="main-question">
<div class="question-title">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
<span>+</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum fugiat ullam molestias dignissimos deleniti inventore aspernatur nam excepturi vitae nihil, temporibus accusantium tempore deserunt error libero, itaque earum sapiente sequi.</p>
</div>
<div class="main-question">
<div class="question-title">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
<span>+</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum fugiat ullam molestias dignissimos deleniti inventore aspernatur nam excepturi vitae nihil, temporibus accusantium tempore deserunt error libero, itaque earum sapiente sequi.</p>
</div>
</div>
</div>
</div>
<!-- End questions -->
Your issue here is this line of code:
let paragraphElement = e.target.parentNode.querySelector("p");
Since you didn't set the indentations on your HTML properly, I didn't notice this issue in the first place.
You need to use this instead:
let paragraphElement = e.target.closest(".main-question").querySelector("p")
The answer of your question in the comment is NO, but when you click h4, you also click div because they are occupying the same area, unless you added stopPropagation to your function. But "e.target" is the item you clicked directly. If it's h4, its parentNode is "question-title" and it has no "p" child.
When you work with JS, always use console.log(). You can see the problem most of the time.
//This part is not necessary because the class "showHide" will be toggled below
document.querySelectorAll(".main-question").forEach(el ...
Also change your CSS for ".question-title" => "justify-content: space-around;" to show the icon
let downBtn = document.querySelectorAll(".main-question .question-title");
downBtn.forEach(dbtn => {
dbtn.addEventListener("click", (e) => {
let paragraphElement = e.target.parentNode.parentNode.querySelector("p");
paragraphElement.classList.toggle("showHide");
let spanSign = dbtn.querySelector("span");
if (paragraphElement.classList.contains("showHide")) {
spanSign.innerHTML = "--";
} else {
spanSign.innerHTML = "+";
}
});
});
I am trying to add an on-click-smooth-scroll effect like this one: https://michalsnik.github.io/aos/
I have read this: Smooth scroll to specific div on click and I am unable to adapt it. I don't understand what scrollTop: $("#page2").offset().top does.
My issue is that the scroll is "snapping". And that's probably because I have applied scroll-snap on the containers.
Also, when you're in-between the pages and click on the scroll down arrow it will either move up or down.
I would like to get the second page on full view whenever I press on that arrow. It should Scroll Down until #page2 has height: 100vh or it occupies the whole view port.
// eliminate scroll-bar
var child = document.getElementById('child-container');
child.style.right = child.clientWidth - child.offsetWidth + "px";
//scroll down effect on scroll-down-arrow
$(".scroll-down-arrow").click(function() {
$('html,body,#child-container').animate({scrollTop: $("#page2").offset().top}, 'slow', 'linear');
});
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* *** index.html - START *** */
body, html {
height: 100%;
width: 100%;
overflow: hidden;
}
#parent-container {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#child-container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px; /* exact value is given through JavaScript */
overflow: auto;
scroll-snap-type: both proximity;
}
header {
height: 100%;
background-color: grey;
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
scroll-snap-align: center;
}
header h1 {
font-size: 32px;
font-weight: bold;
position: sticky;
top: 5%;
margin-bottom:10px;
}
header p {
position: sticky;
width: 450px;
text-align: center;
margin: auto;
margin-top: 100px;
font-size: 1.5em;
}
header .scroll-down-arrow {
position: absolute;
left: 50%;
bottom: 20px;
display: block;
text-align: center;
font-size: 20px;
z-index: 100;
text-decoration: none;
text-shadow: 0;
width: 30px;
height: 30px;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
left: 50%;
transform: translate(-50%, 0%) rotate(45deg);
animation: fade_move_down 3s ease-in-out infinite;
cursor: pointer;
}
/*animated scroll arrow animation*/
#keyframes fade_move_down {
0% { transform:translate(0,-15px) rotate(45deg); opacity: 0; }
25% {opacity: 1;}
/* 50% { opacity: 1; } */
100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
.container_page_2 {
width: 100%;
height: 100vh;
scroll-snap-align: center;
overflow: hidden;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="parent-container">
<div id="child-container">
<!-- #header -->
<header>
<div class="nav-container">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<h1 id="sticky-title">Lorem ipsum</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi debitis in libero tenetur suscipit iusto eum nulla dolorum aperiam adipisci unde veritatis vel iure, a nam, saepe exercitationem illum vitae.</p>
<div class="scroll-down-arrow"></div>
</header>
<!-- #page2 -->
<div id="page2" class="container_page_2">
<div class="column active">
<div class="content">
<h1>1</h1>
<div class="box">
<h2>background-attachment: fixed;</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg1"></div>
</div>
<div class="column">
<div class="content">
<h1>2</h1>
<div class="box">
<h2>background-attachment: scroll;</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg2"></div>
</div>
<div class="column">
<div class="content">
<h1>3</h1>
<div class="box">
<h2>background-attachment: scroll;</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg3"></div>
</div>
<div class="column">
<div class="content">
<h1>4</h1>
<div class="box">
<h2>background-attachment: fixed;</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg4"></div>
</div>
</div>
https://codepen.io/bleah1/pen/gjYBgQ
I haven't added all the elements from the second page, but it doesn't matter, because the scrolling isn't affected. As you can see it's not smooth at all, it's actually pretty snappy.
What do you think ? I would like to keep the scroll-snap, because I like that idea.
Hi can you try this solution.
Basically I removed the css when click event starts then added it when the scrollTop event ends.
Remember to remove it from your css #child-container
$(".scroll-down-arrow").click(function() {
$('#child-container').css('scroll-snap-type','')
$('html,body,#child-container').animate({
scrollTop: $("#page2").offset().top}, 'slow', 'linear')
.promise()
.done(() => {$('#child-container')
.css('scroll-snap-type','both proximity')
});
});
Based on #Ekin Alcar answer I was able to fix my issue. I followed his idea of removing the scroll-snap-type css attribute from #child-container by using $('#child-container').css('scroll-snap-type',''); inside of the original script, like this:
$(".scroll-down-arrow-container").click(function() {
$('#child-container').css('scroll-snap-type','');
$('html, body, #child-container').animate({
scrollTop: $(window).height()
}, 1000)
.promise()
.done(() => {$('#child-container')
.css('scroll-snap-type','both proximity')
});
});
The trick with .css is that it can only remove attributes that are used in the style tag inside a .html file. It won't work with a .css stylesheet.
From the API's documentation:
It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or < style > element.
As such scroll-snap-type: both proximity; was removed from the .css file and added in the .html file:
<div id="child-container" style="scroll-snap-type: both proximity;">
Also, to fix the effect of scrolling up or down whenever you're in between pages I've replaced scrollTop: $("#page2").offset().top with scrollTop: $(window).height(). Don't ask me why it works, but it does.
I have some content in my post. But I want to hide it until I click to a link in this post. I have yet to build this site, but I will say my idea.
The first Heading
The second Heading
The third Heading
The fourth Heading
/* The content following are hidden Until I clicked to a link above. /
/ Content is available wrapped in a div tag, do not loaded from another site. */
Content 1 will be show only click to "1. The first Heading"
Content 2 will be show only click to "2. The second Heading"
Content 3 will be show only click to "3. The third Heading"
Content 4 will be show only click to "4. The fourth Heading"
Can use CSS or Ajax / jQuery to create the effect?
You could do it using the following jquery code:
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
Here is the complete demo how you can hide and show the element by click event.
I have made a pure css accordion that achieves the same functionality.Checkout the following link at codepen
HTML:
<div class="container">
<ul>
<li>What is java Programming Language?
<div class="acc-content" id="first">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae.
</p>
</div></li>
<li>How is javascript different from java?
<div class="acc-content" id="second">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae
</p>
</div></li>
<li>Other front end technologies
<div class="acc-content" id="third">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae
</p>
</div></li>
</ul>
</div>
CSS:
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
padding-top: 50px;
font : 1em cursive;
background-image: url(http://www.mrwallpaper.com/wallpapers/fantasy-winter-scenery-1920x1200.jpg);
background-size: cover;
color: #fff;
overflow-x: hidden;
}
.container{
position: relative;
width: 100%;
max-width: 500px;
margin: auto;
padding: 5px;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.acc-header{
display: block;
cursor: pointer;
padding: 10px 20px;
background-color: #000;
opacity: 0.7;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: #fff;
border-radius: 2px;
margin-bottom: 10px 0 0 10px;
}
.acc-content p{
margin: 10px;
}
.acc-content{
background-color: #222;
opacity: 0.7;
height: 0px;
overflow: hidden;
-webkit-transition: height 0.4s ease;
-moz-transition: height 0.4s ease;
-ms-transition: height 0.4s ease;
-o-transition: height 0.4s ease;
transition: height 0.4s ease;
}
.acc-content:target{
height: 170px;
}
With jQuery it can be pretty easy. By default you hide .content divs with CSS and display the corresponding one on heading click. Consider bellow example.
var $content = $('.content');
$('h2').click(function() {
$content.removeClass('show')
.filter('.content-' + $(this).data('content'))
.addClass('show');
});
.content {
display: none;
padding: 5px;
background: #EEE;
}
.content.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 data-content="1">Heading #1</h2>
<h2 data-content="2">Heading #2</h2>
<h2 data-content="3">Heading #3</h2>
<div class="content content-1">Content #1</div>
<div class="content content-2">Content #2</div>
<div class="content content-3">Content #3</div>
If I understand well, I would recommend to load from ajax the content on first click and then hide it instead of deleting the toggled panel and retrieve it again from AJAX each time (so that there is no wait on each click and less requests).
So here's a way of doing it:
$('.header').click(function()
{
var clickedHeader= $(this);
if (clickedHeader.next().is('.toggle:visible'))
{
clickedHeader.next().slideDown(800);
}
else if (clickedHeader.next().is('.toggle:hidden'))
{
clickedHeader.next().slideUp(800);
}
else
{
$.get(url, data, function(data)
{
// First do some treatment if needed...
clickedHeader.after('<div class="toggle" style="display:none;">'+data+'</div>');
clickedHeader.next().slideDown(800);
});
}
});
This will work if you have HTML like this for ex.
<div class="header">First header</div>
<div class="header">Second header</div>
<div class="header">Third header</div>
<div class="header">Fourth header</div>
and after each header you would toggle a div that has class '.toggle'.
Hope it helps.