I have four paragraphs inside a div and the first child (or rather the first paragraph) is visible. Besides, I have two buttons ("next" and "previous") and when the button is clicked I have to hide the current paragraph and show the next/previous paragraph.
I've tried to write a function that accomplishes this goal but it's doesn't seem to be working. It doesn't hide the current paragraph and doesn't show the next/previous sibling.
Here is an example:
var show = function(elem) {
elem.style.display = 'block';
};
var hide = function(elem) {
elem.style.display = 'none';
}
var toggle = function(elem, next) {
if (window.getComputedStyle(elem).display === 'block') {
hide(elem);
show(next);
return;
}
};
var count = 0;
document.addEventListener('click', function(event) {
if (!event.target.classList.contains('toggle')) return;
event.preventDefault();
var e = document.getElementById("bal");
var content = e.childNodes[count];
count++;
var next = content.nextSibling;
if (!content) return;
toggle(content, next);
}, false);
#bal {
width: 48%;
border: 1px solid red;
padding: 1em;
}
#bal p {
display: none;
}
#bal p:nth-child(1) {
display: block;
}
#jobb {
width: 48%;
float: right;
}
<div id="jobb">
<form id="gombok">
<span>
<input type="button" name="previous" value="Previous">
<input type="button" class="toggle" href="#bal" name="next" value="Next">
</span>
</form>
</div>
<div id="bal" class="sib">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
This function doesn't recognize the current paragraph and if I click two times on the "next" button it deletes the text of the first paragraph.
#dbramwell has a valuable explanation why your code wasn't working:
Using childNodes rather than children. As you're trying to set style on them, you need to use children to get elements rather than nodes. See here.
if(!content) return;, you need to check if "next" exists, rather than content, as on the last paragraph content will exist when next doesn't
and also corrected your function:
var show = function (elem){
elem.style.display = 'block';
};
var hide = function (elem){
elem.style.display = 'none';
}
var toggle = function(elem, next){
if (window.getComputedStyle(elem).display === 'block'){
hide(elem);
show(next);
return;
}
};
var count = 0;
document.addEventListener('click', function(event){
if (!event.target.classList.contains('toggle')) return;
event.preventDefault();
var e = document.getElementById("bal");
var content = e.children[count];
count++;
var next = e.children[count];
if(!next) return;
toggle(content, next);
}, false);
<!DOCTYPE html>
<html lang="hu">
<head>
<title>JS példák</title>
<meta charset="utf-8">
<meta name="description" content="JavaScript példák">
<script src="utils.js"></script>
<script src="./view_para.js"></script>
<style type="text/css">
#bal {
width: 48%;
border: 1px solid red;
padding: 1em;
}
#bal p {
display: none;
}
#bal p:nth-child(1) {
display: block;
}
#jobb {
width: 48%;
float: right;
}
</style>
</head>
<body>
<div id="jobb">
<form id="gombok">
<span>
<input type="button" name="previous" value="Előző">
<input type="button" class="toggle" href="#bal" name="next" value="Következő">
</span>
</form>
</div>
<div id="bal" class="sib">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
semper felis in nunc tincidunt lacinia. Aenean interdum,
lorem pretium maximus euismod, dolor tellus porta velit, sed
dapibus ex velit non ante. Morbi consequat rhoncus
erat, a laoreet felis commodo eget. Phasellus sed justo nibh.
Quisque ut felis malesuada, dictum erat vel, vehicula
nunc. Sed quis facilisis enim. Sed non magna nisl. Duis
pellentesque tempus mollis.</p>
<p>In ultrices mauris risus, ac blandit arcu vehicula vel. Mauris in
nulla nulla. Praesent dignissim justo at lorem
tempus molestie. Nunc interdum, justo non iaculis mollis, quam
ipsum mollis massa, id dignissim odio purus quis
ex. Ut a odio venenatis, malesuada diam et, blandit magna. Nam
scelerisque purus ut risus interdum, et vehicula
augue vestibulum. Proin mattis vehicula arcu, sit amet suscipit
velit malesuada sed. In hac habitasse platea
dictumst. Ut non laoreet dolor. Nunc pellentesque nulla at justo
maximus dignissim. </p>
<p>ellentesque convallis sapien eget tortor fermentum, nec consequat
lacus interdum. Sed id pulvinar risus, eu ornare
tellus. Morbi non ex magna. Nunc sed massa id dolor ultrices
consequat. Curabitur fermentum nibh quis sollicitudin
condimentum. Integer a quam vitae quam fringilla consectetur.
Donec vehicula, risus sed sagittis condimentum,
risus neque luctus mauris, accumsan consectetur lectus nisi id
tellus. Quisque eu sapien non lectus imperdiet
tincidunt consequat non metus. Nulla egestas iaculis arcu sed
elementum. Praesent pellentesque sem purus. Nulla
hendrerit leo lacus, sit amet sodales ante porttitor at. Fusce
dapibus laoreet dui, sit amet ornare odio mollis
non. In hac habitasse platea dictumst. Praesent non ex at nunc
ullamcorper interdum. </p>
<p>Duis tortor leo, ultricies quis placerat vel, scelerisque eu
augue. Duis est odio, interdum sit amet ullamcorper
eget, tincidunt et lectus. Aliquam erat volutpat. Donec tempus
porttitor consectetur. Pellentesque ac enim vestibulum,
eleifend arcu et, hendrerit ligula. Sed quis magna metus.
Quisque dignissim metus eget iaculis commodo.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus.
Vestibulum et est gravida, mattis arcu sed, ultricies
elit. Sed vitae nisi ac lacus tincidunt varius et eu augue.
Etiam ultrices nunc vitae lacinia sagittis. Curabitur
molestie ac tellus non porttitor. Suspendisse potenti. Praesent
facilisis semper iaculis. Sed justo enim, imperdiet
vitae aliquet id, tempor ut orci. Nunc sed risus arcu. In
imperdiet dui eget erat elementum egestas. Pellentesque
eget urna vitae nulla dapibus euismod. Curabitur nisl diam,
pretium id mi posuere, molestie gravida justo. </p>
</div>
However, this is not the way you should design your code for an easy task like this. I wrote a much simpler function that should do the task equally good.
var count = 0;
function bla() {
var num = document.querySelectorAll("div#bal p").length - 1;
if(count < 0) {
count = num;
} else if (count > num) {
count = 0;
}
var all = document.querySelectorAll("div p");
for (var i = 0; i < all.length; i++) {
all[i].style.display = "none";
}
document.querySelectorAll("div p")[count].style.display = "block";
}
div > p {
display: none;
}
div > p:first-child {
display: block;
}
<div>
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
</div>
<button onclick="bla(count++);">Next</button>
<button onclick="bla(count--);">Previous</button>
Even with your (not shortened) example this is easy to accomplish.
var count = 0;
function bla() {
var num = document.querySelectorAll("div#bal p").length - 1;
if (count < 0) {
count = num;
} else if (count > num) {
count = 0;
}
var all = document.querySelectorAll("div#bal p");
for (var i = 0; i < all.length; i++) {
all[i].style.display = "none";
}
document.querySelectorAll("div#bal p")[count].style.display = "block";
}
#bal {
width: 48%;
border: 1px solid red;
padding: 1em;
}
#bal p {
display: none;
}
#bal p:nth-child(1) {
display: block;
}
#jobb {
width: 48%;
float: right;
}
<div id="jobb">
<form id="gombok">
<span>
<input type="button" onclick="bla(count--)" name="previous" value="Előző">
<input type="button" onclick="bla(count++)" class="toggle" href="#bal" name="next" value="Következő">
</span>
</form>
</div>
<div id="bal" class="sib">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper felis in nunc tincidunt lacinia. Aenean interdum, lorem pretium maximus euismod, dolor tellus porta velit, sed dapibus ex velit non ante. Morbi consequat rhoncus erat, a laoreet felis
commodo eget. Phasellus sed justo nibh. Quisque ut felis malesuada, dictum erat vel, vehicula nunc. Sed quis facilisis enim. Sed non magna nisl. Duis pellentesque tempus mollis.</p>
<p>In ultrices mauris risus, ac blandit arcu vehicula vel. Mauris in nulla nulla. Praesent dignissim justo at lorem tempus molestie. Nunc interdum, justo non iaculis mollis, quam ipsum mollis massa, id dignissim odio purus quis ex. Ut a odio venenatis,
malesuada diam et, blandit magna. Nam scelerisque purus ut risus interdum, et vehicula augue vestibulum. Proin mattis vehicula arcu, sit amet suscipit velit malesuada sed. In hac habitasse platea dictumst. Ut non laoreet dolor. Nunc pellentesque nulla
at justo maximus dignissim. </p>
<p>ellentesque convallis sapien eget tortor fermentum, nec consequat lacus interdum. Sed id pulvinar risus, eu ornare tellus. Morbi non ex magna. Nunc sed massa id dolor ultrices consequat. Curabitur fermentum nibh quis sollicitudin condimentum. Integer
a quam vitae quam fringilla consectetur. Donec vehicula, risus sed sagittis condimentum, risus neque luctus mauris, accumsan consectetur lectus nisi id tellus. Quisque eu sapien non lectus imperdiet tincidunt consequat non metus. Nulla egestas iaculis
arcu sed elementum. Praesent pellentesque sem purus. Nulla hendrerit leo lacus, sit amet sodales ante porttitor at. Fusce dapibus laoreet dui, sit amet ornare odio mollis non. In hac habitasse platea dictumst. Praesent non ex at nunc ullamcorper interdum.
</p>
<p>Duis tortor leo, ultricies quis placerat vel, scelerisque eu augue. Duis est odio, interdum sit amet ullamcorper eget, tincidunt et lectus. Aliquam erat volutpat. Donec tempus porttitor consectetur. Pellentesque ac enim vestibulum, eleifend arcu et,
hendrerit ligula. Sed quis magna metus. Quisque dignissim metus eget iaculis commodo.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum et est gravida, mattis arcu sed, ultricies elit. Sed vitae nisi ac lacus tincidunt varius et eu augue. Etiam ultrices nunc vitae lacinia sagittis. Curabitur molestie ac tellus
non porttitor. Suspendisse potenti. Praesent facilisis semper iaculis. Sed justo enim, imperdiet vitae aliquet id, tempor ut orci. Nunc sed risus arcu. In imperdiet dui eget erat elementum egestas. Pellentesque eget urna vitae nulla dapibus euismod.
Curabitur nisl diam, pretium id mi posuere, molestie gravida justo. </p>
</div>
I think you have a couple of issues.
Using childNodes rather than children. As you're trying to set style on them, you need to use children to get elements rather than nodes. See here.
if(!content) return;, you need to check if "next" exists, rather than content, as on the last paragraph content will exist when next doesn't
var show = function (elem){
elem.style.display = 'block';
};
var hide = function (elem){
elem.style.display = 'none';
}
var toggle = function(elem, next){
if (window.getComputedStyle(elem).display === 'block'){
hide(elem);
show(next);
return;
}
};
var count = 0;
document.addEventListener('click', function(event){
if (!event.target.classList.contains('toggle')) return;
event.preventDefault();
var e = document.getElementById("bal");
var content = e.children[count];
count++;
var next = e.children[count];
if(!next) return;
toggle(content, next);
}, false);
<!DOCTYPE html>
<html lang="hu">
<head>
<title>JS példák</title>
<meta charset="utf-8">
<meta name="description" content="JavaScript példák">
<script src="utils.js"></script>
<script src="./view_para.js"></script>
<style type="text/css">
#bal {
width: 48%;
border: 1px solid red;
padding: 1em;
}
#bal p {
display: none;
}
#bal p:nth-child(1) {
display: block;
}
#jobb {
width: 48%;
float: right;
}
</style>
</head>
<body>
<div id="jobb">
<form id="gombok">
<span>
<input type="button" name="previous" value="Előző">
<input type="button" class="toggle" href="#bal" name="next" value="Következő">
</span>
</form>
</div>
<div id="bal" class="sib">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
semper felis in nunc tincidunt lacinia. Aenean interdum,
lorem pretium maximus euismod, dolor tellus porta velit, sed
dapibus ex velit non ante. Morbi consequat rhoncus
erat, a laoreet felis commodo eget. Phasellus sed justo nibh.
Quisque ut felis malesuada, dictum erat vel, vehicula
nunc. Sed quis facilisis enim. Sed non magna nisl. Duis
pellentesque tempus mollis.</p>
<p>In ultrices mauris risus, ac blandit arcu vehicula vel. Mauris in
nulla nulla. Praesent dignissim justo at lorem
tempus molestie. Nunc interdum, justo non iaculis mollis, quam
ipsum mollis massa, id dignissim odio purus quis
ex. Ut a odio venenatis, malesuada diam et, blandit magna. Nam
scelerisque purus ut risus interdum, et vehicula
augue vestibulum. Proin mattis vehicula arcu, sit amet suscipit
velit malesuada sed. In hac habitasse platea
dictumst. Ut non laoreet dolor. Nunc pellentesque nulla at justo
maximus dignissim. </p>
<p>ellentesque convallis sapien eget tortor fermentum, nec consequat
lacus interdum. Sed id pulvinar risus, eu ornare
tellus. Morbi non ex magna. Nunc sed massa id dolor ultrices
consequat. Curabitur fermentum nibh quis sollicitudin
condimentum. Integer a quam vitae quam fringilla consectetur.
Donec vehicula, risus sed sagittis condimentum,
risus neque luctus mauris, accumsan consectetur lectus nisi id
tellus. Quisque eu sapien non lectus imperdiet
tincidunt consequat non metus. Nulla egestas iaculis arcu sed
elementum. Praesent pellentesque sem purus. Nulla
hendrerit leo lacus, sit amet sodales ante porttitor at. Fusce
dapibus laoreet dui, sit amet ornare odio mollis
non. In hac habitasse platea dictumst. Praesent non ex at nunc
ullamcorper interdum. </p>
<p>Duis tortor leo, ultricies quis placerat vel, scelerisque eu
augue. Duis est odio, interdum sit amet ullamcorper
eget, tincidunt et lectus. Aliquam erat volutpat. Donec tempus
porttitor consectetur. Pellentesque ac enim vestibulum,
eleifend arcu et, hendrerit ligula. Sed quis magna metus.
Quisque dignissim metus eget iaculis commodo.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus.
Vestibulum et est gravida, mattis arcu sed, ultricies
elit. Sed vitae nisi ac lacus tincidunt varius et eu augue.
Etiam ultrices nunc vitae lacinia sagittis. Curabitur
molestie ac tellus non porttitor. Suspendisse potenti. Praesent
facilisis semper iaculis. Sed justo enim, imperdiet
vitae aliquet id, tempor ut orci. Nunc sed risus arcu. In
imperdiet dui eget erat elementum egestas. Pellentesque
eget urna vitae nulla dapibus euismod. Curabitur nisl diam,
pretium id mi posuere, molestie gravida justo. </p>
</div>
(function() {
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var block = document.getElementById("block");
var paragraphs = block.getElementsByTagName("p");
var activeParagraphIndex = 0;
var paragraphsCount = paragraphs.length;
var show = function (elem){
elem.style.display = 'block';
};
var hide = function (elem){
elem.style.display = 'none';
}
var toggle = function(elem, next){
if (window.getComputedStyle(elem).display === 'block'){
hide(elem);
show(next);
return;
}
};
next.addEventListener('click', function(event){
var prev = paragraphs[activeParagraphIndex];
activeParagraphIndex++;
if(activeParagraphIndex === paragraphsCount) {
activeParagraphIndex = 0;
}
var next = paragraphs[activeParagraphIndex];
toggle(prev,next);
}, false);
prev.addEventListener('click', function(event){
var prev = paragraphs[activeParagraphIndex];
activeParagraphIndex--;
if(activeParagraphIndex === -1) {
activeParagraphIndex = paragraphsCount - 1;
}
var next = paragraphs[activeParagraphIndex];
toggle(prev,next);
}, false);
})();
#block p:not(:first-child) {
display:none;
}
<div id="block">
<p>My first paragraph.</p>
<p>My Second paragraph.</p>
<p>My Third paragraph.</p>
<p>My Fourth paragraph.</p>
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
This code works for n paragraphs. You can add as many as you want.
Related
I want to make a CTA button that sticks to the bottom of the page after page scroll reaches to some extent. Kindly look at the image below:
The rules follow:
On load, it should be on the original position of the CTA button.
When the page is getting scrolled, the CTA button will follow.
When the CTA button reaches to the top of the window, the button will move to the bottom-right corner and remains sticky over there.
Any codepen, jsfiddle or website references about this kind of interaction will be appreciated.
There are multiple ways to do this like using plugins or using simple CSS and JavaScript(below example). If you are looking for animation to button on the scroll you can make some adjustments in CSS with animation code or I guess some of the plugins are already doing this.
window.onscroll = function() {myFunction()};
var btn = document.getElementById("floatBtn");
var sticky = btn.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
btn.classList.add("sticky")
} else {
btn.classList.remove("sticky");
}
}
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.content {
padding: 16px;
}
.keka {
width: 100%;
text-align: center;
}
#floatBtn {
background: #004567;
color: white;
padding: 10px 30px;
font-size: 18px;
display: inline-block;
}
.sticky {
position: fixed;
bottom: 0;
right: 20px;
}
.sticky + .content {
padding-top: 60px;
}
.content{
height: 1900px
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="header">
<h2>Header of the page</h2>
<p>Some content</p>
</div>
<div class="keka">
<button id="floatBtn">Floating button</button>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ex eu nulla interdum fermentum a at est. Vestibulum vehicula augue et nisl porta, at pretium leo consequat. Suspendisse sit amet semper nisi. In hac habitasse platea dictumst. In vehicula elit ut efficitur mollis. Nam vehicula pulvinar pulvinar. Curabitur neque purus, placerat eget nulla iaculis, tincidunt euismod lectus. Praesent facilisis at sem sit amet sagittis. Cras sagittis mi vel ornare convallis. Morbi tempus tempus lacus, eget lacinia magna porttitor non. Praesent tellus quam, molestie tincidunt libero sit amet, luctus viverra velit. Etiam vestibulum aliquam posuere. Praesent a dapibus sem. Sed cursus mi sit amet nisl maximus, eget varius lectus consectetur. Mauris molestie ac mi non malesuada. Proin faucibus sem vitae ex blandit tempor. Donec ut diam in tellus malesuada lacinia maximus non arcu. Proin blandit nisl at lacus feugiat, et auctor lectus viverra. Donec convallis eleifend ligula sagittis viverra. Vivamus mattis, felis et finibus maximus, diam felis vestibulum odio, eget efficitur tellus magna nec ante. Sed porta elit commodo nisi efficitur, in egestas nibh maximus. Integer nec leo ac ligula semper finibus at rhoncus felis. In pellentesque tincidunt pretium. Ut imperdiet eu nisi quis molestie. Cras lectus turpis, aliquam ut egestas ac, condimentum quis sem. In nec lorem dolor. Fusce non velit nec purus aliquet ultricies porttitor at metus. Donec et libero id nunc viverra dictum vel et sem. Integer tellus ligula, posuere quis dignissim sit amet, suscipit sit amet arcu. Vestibulum nec sodales magna, vitae varius justo. Ut ut felis a odio gravida malesuada eu ut lectus. Suspendisse quis nisl vel sem cursus luctus ac in nibh. Praesent at velit ac dolor convallis condimentum. Maecenas ac sagittis odio. In luctus eros sit amet accumsan maximus. Integer non dictum magna, at viverra urna. Mauris lacinia sodales nibh in scelerisque. Ut viverra ante ut nunc commodo, eu varius ipsum rutrum. Morbi dictum sodales dignissim. In eu finibus arcu. In consectetur eleifend libero. Aliquam purus felis, faucibus et rutrum non, consequat at metus. Cras ultricies metus eget rhoncus pulvinar. Quisque hendrerit at lectus fringilla aliquam. Sed viverra tellus tellus, eget fermentum mi ultrices in. Cras auctor, tortor quis eleifend aliquet, dui orci volutpat erat, quis sagittis nisl nisi at lacus. Suspendisse non condimentum orci. Quisque in elit mi. Praesent malesuada nibh a sapien fermentum vehicula. In in felis nibh. Nunc vitae turpis et est aliquet tempor vulputate volutpat neque. Vestibulum ut sapien sit amet diam sodales convallis sit amet euismod urna. In vehicula fermentum est, non porttitor risus pellentesque quis. Fusce condimentum mauris ut felis fringilla maximus. Nullam pharetra nisi nec enim sodales tincidunt. Morbi imperdiet felis eget lacus sagittis ornare. Donec euismod metus at erat luctus, non ullamcorper nunc ultricies. Sed sit amet vestibulum urna, et faucibus felis. Curabitur non mollis arcu, ut rhoncus leo. Integer sagittis iaculis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</body>
</html>
I have an element at the top of the screen with position:sticky; and a JS scroll eventlistener to add a stuck class when the element is stuck (scroll Y is bigger than 0).
This stuck makes an element (that has CSS transition) inside the sticky element to reduce in height.
When you scroll very slowly, this change in height makes the scrollY jump back to zero and removes the stuck class, and this creates a jolty scrolling loop which is infinite until you scroll faster and outscroll the issue.
How can I make this smooth when using position: sticky, you can see it live here:
https://jsfiddle.net/27rzba5v/
This is happening because you're changing the element's height, which is affecting the box model and thus the dimensions of your document. A simple fix would be to instead use a transform on .wrap instead of transitioning its height. It's better to animate transforms and opacity as it can be handled by the GPU rather than by making the browser repaint.
var lastScrollY = 0;
var ticking = false;
window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );
body {
margin: 0;
}
.wrap {
background: #666;
text-align: center;
position: sticky;
top: 0;
transition: 0.5s; /* Move transition here */
transform-origin: top left; /* Make sure transition happens from the top left */
}
.block {
width: 80px;
height: 80px;
background: red;
display: block;
}
.stuck .wrap { /* Transform wrap instead of block */
transform: scaleY(.5); /* Change scale instead of height */
}
<div class="wrap">
<span class="block"></span>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem a metus tincidunt eleifend id in odio. Nam malesuada hendrerit tristique. Pellentesque id ornare elit, ac lobortis metus. Sed iaculis et nisi et consectetur. Proin pellentesque metus mi, quis fringilla mauris pulvinar et. Vivamus pharetra elit ligula, eu consectetur magna consequat nec. Donec sed enim sit amet augue malesuada varius id a libero. Nullam nec ante id justo elementum congue quis in purus. Integer finibus cursus volutpat. Donec non laoreet ipsum.
Maecenas id venenatis velit, eu feugiat dolor. Vestibulum malesuada erat ut turpis mattis vehicula. Vestibulum sem leo, cursus quis lacinia eu, tincidunt eu velit. Nulla odio elit, tristique vel bibendum vitae, placerat nec eros. Proin auctor id leo sed rutrum. Proin convallis erat sit amet neque aliquam vestibulum. Ut sodales vel nisl eu imperdiet.
Donec a porttitor dui, vitae ullamcorper nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non elit eu elit blandit hendrerit id ut eros. Duis sagittis elementum ligula eu venenatis. Aenean nunc mauris, dignissim ut venenatis ac, pharetra eget magna. Curabitur elementum enim sed pharetra rhoncus. Praesent sodales at ex at consectetur. Curabitur sed dictum mi, ut eleifend arcu. Nam feugiat risus quis congue porttitor. Maecenas vehicula lorem ultrices ante sollicitudin, placerat sollicitudin dolor fermentum. Aliquam arcu turpis, faucibus vel placerat a, molestie vel lectus. Sed condimentum euismod tincidunt. Mauris odio tortor, luctus id eleifend vitae, aliquet ut libero. Vestibulum vitae placerat turpis. Duis nec facilisis eros. Morbi ipsum arcu, tempus ac massa nec, mollis aliquet lacus.
Phasellus maximus eros quis massa maximus, et mattis tellus cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus interdum, cursus diam ut, posuere purus. Duis non vestibulum nulla, vitae egestas elit. Phasellus venenatis libero in nunc lobortis tempor in vel orci. Praesent varius lacus eleifend, pretium lectus ut, pulvinar arcu. Nunc ornare dolor velit, id pulvinar urna semper eget. Aenean finibus dui vitae dolor ullamcorper finibus. Cras consequat viverra tellus, a accumsan sem viverra sed. Nulla felis tortor, laoreet non tincidunt elementum, tempus ac risus. Sed nibh nisl, ultrices vel iaculis in, fringilla at ipsum. Curabitur metus ligula, tincidunt non arcu eget, ultricies pellentesque ligula. Duis id est posuere, molestie urna non, gravida tortor. Praesent lacinia erat ac diam sagittis, quis faucibus nunc blandit.
Fusce aliquet tincidunt turpis, ut consequat metus consectetur at. Nunc volutpat semper enim, ut finibus orci luctus in. Mauris pharetra consectetur arcu sed pulvinar. Sed cursus fermentum velit, mattis varius ante commodo ac. Fusce erat mauris, sagittis quis eros vitae, consectetur venenatis nibh. Fusce porttitor tortor lectus, at efficitur diam dictum et. Quisque et suscipit sem. Mauris vulputate orci tellus, non efficitur eros blandit ut. Donec eget hendrerit elit.
If you must transition the element's height then you could offset the effects of the dimensions changing by using a container as a buffer.
var lastScrollY = 0;
var ticking = false;
window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );
body {
margin: 0;
}
.wrapoffset { /* Make this element sticky instead */
height: 80px;
position: sticky;
top: 0;
width: 100%;
}
.wrap {
background: #666;
text-align: center;
width: 100%;
}
.block {
height: 80px;
width: 80px;
background: red;
display: block;
transition: 0.5s;
}
.stuck .block {
height: 40px;
}
<div class="wrapoffset"> <!-- new element -->
<div class="wrap">
<span class="block"></span>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem a metus tincidunt eleifend id in odio. Nam malesuada hendrerit tristique. Pellentesque id ornare elit, ac lobortis metus. Sed iaculis et nisi et consectetur. Proin pellentesque metus mi, quis fringilla mauris pulvinar et. Vivamus pharetra elit ligula, eu consectetur magna consequat nec. Donec sed enim sit amet augue malesuada varius id a libero. Nullam nec ante id justo elementum congue quis in purus. Integer finibus cursus volutpat. Donec non laoreet ipsum.
Maecenas id venenatis velit, eu feugiat dolor. Vestibulum malesuada erat ut turpis mattis vehicula. Vestibulum sem leo, cursus quis lacinia eu, tincidunt eu velit. Nulla odio elit, tristique vel bibendum vitae, placerat nec eros. Proin auctor id leo sed rutrum. Proin convallis erat sit amet neque aliquam vestibulum. Ut sodales vel nisl eu imperdiet.
Donec a porttitor dui, vitae ullamcorper nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non elit eu elit blandit hendrerit id ut eros. Duis sagittis elementum ligula eu venenatis. Aenean nunc mauris, dignissim ut venenatis ac, pharetra eget magna. Curabitur elementum enim sed pharetra rhoncus. Praesent sodales at ex at consectetur. Curabitur sed dictum mi, ut eleifend arcu. Nam feugiat risus quis congue porttitor. Maecenas vehicula lorem ultrices ante sollicitudin, placerat sollicitudin dolor fermentum. Aliquam arcu turpis, faucibus vel placerat a, molestie vel lectus. Sed condimentum euismod tincidunt. Mauris odio tortor, luctus id eleifend vitae, aliquet ut libero. Vestibulum vitae placerat turpis. Duis nec facilisis eros. Morbi ipsum arcu, tempus ac massa nec, mollis aliquet lacus.
Phasellus maximus eros quis massa maximus, et mattis tellus cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus interdum, cursus diam ut, posuere purus. Duis non vestibulum nulla, vitae egestas elit. Phasellus venenatis libero in nunc lobortis tempor in vel orci. Praesent varius lacus eleifend, pretium lectus ut, pulvinar arcu. Nunc ornare dolor velit, id pulvinar urna semper eget. Aenean finibus dui vitae dolor ullamcorper finibus. Cras consequat viverra tellus, a accumsan sem viverra sed. Nulla felis tortor, laoreet non tincidunt elementum, tempus ac risus. Sed nibh nisl, ultrices vel iaculis in, fringilla at ipsum. Curabitur metus ligula, tincidunt non arcu eget, ultricies pellentesque ligula. Duis id est posuere, molestie urna non, gravida tortor. Praesent lacinia erat ac diam sagittis, quis faucibus nunc blandit.
Fusce aliquet tincidunt turpis, ut consequat metus consectetur at. Nunc volutpat semper enim, ut finibus orci luctus in. Mauris pharetra consectetur arcu sed pulvinar. Sed cursus fermentum velit, mattis varius ante commodo ac. Fusce erat mauris, sagittis quis eros vitae, consectetur venenatis nibh. Fusce porttitor tortor lectus, at efficitur diam dictum et. Quisque et suscipit sem. Mauris vulputate orci tellus, non efficitur eros blandit ut. Donec eget hendrerit elit.
If you want to optimize the performance even more you can look into using IntersectionObserver with a polyfill instead of listening for events on scroll.
I am new to coding. I need to create a accordion, which I have created with html and used jQuery to expand collapse panel. When I try to open first panel, it opens and when I try to open the second panel the first panel closes, which I don't want to happen. I need a simple and easy jQuery method to achieve this.
if ($(this).next().is(':hidden') !== true) {
$(this).removeClass('active');
$(this).next().slideUp("fast");
//var height = $(this).clientHeight;
} else {
$('.panelHeading').removeClass('active');
$('.panelBody').slideUp('fast');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('active');
$(this).next().slideDown('fast');
}
this closes one panel when other is open. I want the open panel to stay open even if I open another.
$(document).ready(function() {
$('.question').click(function() {
if ($(this).next().is(':hidden') !== true) {
$(this).removeClass('active');
$(this).next().slideUp("normal");
} else {
$('.question').removeClass('active');
$('.answer').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('active');
$(this).next().slideDown('normal');
}
}
});
$('.answer').hide();
$('.expand').click(function(event) {
$('.question').next().slideDown('normal'); {
$('.question').addClass('active');
}
});
$('.collapse').click(function(event) {
$('.question').next().slideUp('normal'); {
$('.question').removeClass('active');
}
});
});
#wrapper {
margin-left: auto;
margin-right: auto;
padding-top: 30px;
font-family: verdana;
font-size: 12px;
}
.question {
width: 400px;
float: left;
background: #fff;
padding-left: 20px;
padding-top: 18px;
cursor: pointer;
background-position: 4px -19px;
background-repeat: no-repeat;
}
.answer {
width: 400px;
float: left;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 20px;
background: #fff;
}
.question::before {
content: '\25B6';
color: red;
}
.active:before {
content: '\25E2';
}
a {
color: #000;
text-decoration: none
}
a:hover {
text-decoration: underline
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="wrapper">
<div style="float:right;">Expand All | Collapse All</div>
<div class="question"><span class="head">Lorem ipsum dolor sit amet?</span></div>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec ligula lorem. Mauris laoreet sagittis sem, nec pulvinar neque tempus sit amet. Fusce at mi tortor, eget blandit velit. Phasellus sed dolor at felis auctor mollis nec eget nisl. Fusce
pretium nibh nisi. Aliquam congue iaculis velit, id facilisis elit pharetra a. Nulla posuere nunc vel tortor blandit sit amet tristique dolor venenatis. Phasellus nunc odio, feugiat non egestas ut, rutrum ac elit. Pellentesque iaculis tempor diam
quis ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ullamcorper, enim non imperdiet dictum, nisl eros interdum turpis, sed posuere diam ante ac orci. Pellentesque et malesuada elit.
</div>
<div class="question"><span class="head">Vestibulum in ornare metus?</span></div>
<div class="answer">
Vestibulum in ornare metus. Integer in libero vitae eros bibendum ultricies. Cras ultricies risus eu massa tincidunt faucibus rutrum enim malesuada. Nullam non est a nunc tincidunt porttitor a ac odio. Cras accumsan ante in odio ultrices semper. Fusce
dignissim eleifend vehicula. Aenean dictum ante et lorem lacinia vel fringilla urna vestibulum. Duis condimentum felis in ligula venenatis et auctor massa dapibus. Morbi tincidunt elit a odio scelerisque sodales. Integer et egestas lorem. Suspendisse
tincidunt varius augue, ac fermentum erat ultricies laoreet. Donec eu dolor justo, a convallis lectus. Pellentesque pellentesque, erat ut dictum lacinia, orci nulla posuere tellus, at gravida nibh tellus dictum velit. Donec molestie sapien non dolor
tincidunt eget interdum tortor molestie. Curabitur placerat scelerisque odio, at congue purus malesuada et.
</div>
<div class="question"><span class="head">Donec sagittis massa tristique urna placerat?</span></div>
<div class="answer">
Donec sagittis massa tristique urna placerat at facilisis tortor accumsan. Etiam pulvinar scelerisque mi eu euismod. Donec tempor euismod condimentum. Vivamus consequat tempus est sit amet blandit. Sed malesuada libero in risus fermentum ornare et sed
risus. Duis ut odio nibh. Vivamus pulvinar porta dui, at adipiscing nunc rutrum ut. Nullam elementum pretium faucibus. Quisque faucibus viverra lacus eget consequat. Pellentesque ut tristique nulla. Duis lacus velit, gravida sit amet molestie vitae,
dignissim in lectus. Quisque rhoncus nibh a ligula dictum quis ultrices risus lobortis. Cras volutpat, tortor ac porta mattis, turpis nisl lobortis purus, sed aliquet purus lorem eu tellus. Nunc lacinia bibendum vehicula. Phasellus ut augue eget tortor
viverra molestie at nec ante. Cras venenatis, quam eget rutrum semper, turpis mauris scelerisque lacus, eget placerat urna ante eget diam. Suspendisse quis posuere est. Sed quis magna vitae tellus eleifend iaculis sit amet et ligula. Phasellus mollis
nunc id dolor malesuada placerat. Fusce posuere congue est eu euismod.
</div>
<div class="question"><span class="head">Nulla nec egestas quam?</span></div>
<div class="answer">
Nulla nec egestas quam. Sed gravida libero nec felis consequat elementum. Vivamus ante erat, malesuada sed dictum ac, mattis rhoncus nunc. Mauris libero eros, euismod vitae varius at, pellentesque ac nisl. Pellentesque lobortis, felis eget scelerisque
adipiscing, erat nisi vehicula orci, vel dictum velit orci non ipsum. Aliquam egestas erat sit amet tortor feugiat eu volutpat erat laoreet. Fusce lacinia, dui ac sodales cursus, est eros accumsan metus, sit amet ornare ligula diam eget nisl. Sed
nec lectus tellus. Phasellus malesuada volutpat luctus. Praesent fringilla feugiat sem quis feugiat. Morbi lorem ante, fermentum et egestas vel, pellentesque in eros. Aliquam ut ipsum ullamcorper nunc cursus consequat. Fusce sagittis convallis risus,
vel accumsan orci scelerisque ut. Curabitur nec sollicitudin nibh. Pellentesque vitae nunc ac nibh lobortis porttitor. Duis sit amet ante lectus, luctus vehicula nisl.
</div>
</div>
You can do something as simple as:
$(document).ready(function() {
$('.question').click(function() {
$(this).toggleClass('active');//toggle on/off the active class
$(this).next().slideToggle('normal');// toggle up/down the slide
});
});
demo
You can just change below code on click of question;
$('.question').click(function() {
if($(this).next().is(':hidden') !== true) {
$(this).removeClass('active');
$(this).next().slideUp("normal");
} else {
$(this).addClass('active');
$(this).next().slideDown('normal');
}
});
Also find Working jsfiddle here.
$(document).ready(function() {
$('.question').click(function() {
if($(this).next().is(':hidden') !== true) {
$(this).removeClass('active');
$(this).next().slideUp("normal");
} else {
$(this).addClass('active');
$(this).next().slideDown('normal');
}
});
$('.answer').hide();
$('.expand').click(function(event)
{$('.question').next().slideDown('normal');
{$('.question').addClass('active');}
}
);
$('.collapse').click(function(event)
{$('.question').next().slideUp('normal');
{$('.question').removeClass('active');}
}
);
});
#wrapper {
margin-left: auto;
margin-right: auto;
padding-top:30px;
font-family:verdana;
font-size:12px;
}
.question {
width: 400px;
float: left;
background: #fff;
padding-left:20px;
padding-top:18px;
cursor: pointer;
background-position : 4px -19px;
background-repeat : no-repeat;
}
.answer {
width: 400px;
float: left;
padding-top:10px;
padding-bottom:10px;
margin-left:20px;
background: #fff;
}
.question::before{
content: '\25B6';
color: red;
}
.active:before {
content: '\25E2';
}
a{color:#000;text-decoration:none}
a:hover{text-decoration:underline}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<body>
<div id="wrapper">
<div style="float:right;">Expand All | Collapse All</div>
<div class="question"><span class="head">Lorem ipsum dolor sit amet?</span></div>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec ligula lorem. Mauris laoreet sagittis sem, nec pulvinar neque tempus sit amet. Fusce at mi tortor, eget blandit velit. Phasellus sed dolor at felis auctor mollis nec eget nisl. Fusce pretium nibh nisi. Aliquam congue iaculis velit, id facilisis elit pharetra a. Nulla posuere nunc vel tortor blandit sit amet tristique dolor venenatis. Phasellus nunc odio, feugiat non egestas ut, rutrum ac elit. Pellentesque iaculis tempor diam quis ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ullamcorper, enim non imperdiet dictum, nisl eros interdum turpis, sed posuere diam ante ac orci. Pellentesque et malesuada elit.
</div>
<div class="question"><span class="head">Vestibulum in ornare metus?</span></div>
<div class="answer">
Vestibulum in ornare metus. Integer in libero vitae eros bibendum ultricies. Cras ultricies risus eu massa tincidunt faucibus rutrum enim malesuada. Nullam non est a nunc tincidunt porttitor a ac odio. Cras accumsan ante in odio ultrices semper. Fusce dignissim eleifend vehicula. Aenean dictum ante et lorem lacinia vel fringilla urna vestibulum. Duis condimentum felis in ligula venenatis et auctor massa dapibus. Morbi tincidunt elit a odio scelerisque sodales. Integer et egestas lorem. Suspendisse tincidunt varius augue, ac fermentum erat ultricies laoreet. Donec eu dolor justo, a convallis lectus. Pellentesque pellentesque, erat ut dictum lacinia, orci nulla posuere tellus, at gravida nibh tellus dictum velit. Donec molestie sapien non dolor tincidunt eget interdum tortor molestie. Curabitur placerat scelerisque odio, at congue purus malesuada et.
</div>
<div class="question"><span class="head">Donec sagittis massa tristique urna placerat?</span></div>
<div class="answer">
Donec sagittis massa tristique urna placerat at facilisis tortor accumsan. Etiam pulvinar scelerisque mi eu euismod. Donec tempor euismod condimentum. Vivamus consequat tempus est sit amet blandit. Sed malesuada libero in risus fermentum ornare et sed risus. Duis ut odio nibh. Vivamus pulvinar porta dui, at adipiscing nunc rutrum ut. Nullam elementum pretium faucibus. Quisque faucibus viverra lacus eget consequat. Pellentesque ut tristique nulla. Duis lacus velit, gravida sit amet molestie vitae, dignissim in lectus. Quisque rhoncus nibh a ligula dictum quis ultrices risus lobortis. Cras volutpat, tortor ac porta mattis, turpis nisl lobortis purus, sed aliquet purus lorem eu tellus. Nunc lacinia bibendum vehicula. Phasellus ut augue eget tortor viverra molestie at nec ante. Cras venenatis, quam eget rutrum semper, turpis mauris scelerisque lacus, eget placerat urna ante eget diam. Suspendisse quis posuere est. Sed quis magna vitae tellus eleifend iaculis sit amet et ligula. Phasellus mollis nunc id dolor malesuada placerat. Fusce posuere congue est eu euismod.
</div>
<div class="question"><span class="head">Nulla nec egestas quam?</span></div>
<div class="answer">
Nulla nec egestas quam. Sed gravida libero nec felis consequat elementum. Vivamus ante erat, malesuada sed dictum ac, mattis rhoncus nunc. Mauris libero eros, euismod vitae varius at, pellentesque ac nisl. Pellentesque lobortis, felis eget scelerisque adipiscing, erat nisi vehicula orci, vel dictum velit orci non ipsum. Aliquam egestas erat sit amet tortor feugiat eu volutpat erat laoreet. Fusce lacinia, dui ac sodales cursus, est eros accumsan metus, sit amet ornare ligula diam eget nisl. Sed nec lectus tellus. Phasellus malesuada volutpat luctus. Praesent fringilla feugiat sem quis feugiat. Morbi lorem ante, fermentum et egestas vel, pellentesque in eros. Aliquam ut ipsum ullamcorper nunc cursus consequat. Fusce sagittis convallis risus, vel accumsan orci scelerisque ut. Curabitur nec sollicitudin nibh. Pellentesque vitae nunc ac nibh lobortis porttitor. Duis sit amet ante lectus, luctus vehicula nisl.
</div>
</div>
</body>
Hope this is what you are looking for.
(function(factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
module.exports = function(root, jQuery) {
if (jQuery === undefined) {
if (typeof window !== 'undefined') {
jQuery = require('jquery');
} else {
jQuery = require('jquery')(root);
}
}
factory(jQuery);
return jQuery;
};
} else {
factory(jQuery);
}
}(function($) {
var originalToggle = $.ui.accordion.prototype._toggle;
$.extend($.ui.accordion.prototype, {
multiple: false,
_toggle: function(data) {
if (this.options.multiple && data.newPanel.length) {
data.oldPanel = data.oldHeader = this.prevShow = $('');
if (this.options.collapsible && data.newPanel.is(':visible')) {
data.oldPanel = data.newPanel;
data.newPanel = $('');
}
}
originalToggle.apply(this, arguments);
}
});
}));
$( function() {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$( "#accordion" ).accordion({
collapsible: true,
multiple: true,
active: 1,
icons: icons
});
} );
#wrapper {
margin-left: auto;
margin-right: auto;
padding-top: 30px;
font-family: verdana;
font-size: 12px;
}
.question {
width: 400px;
float: left;
background: #fff;
padding-left: 20px;
padding-top: 18px;
cursor: pointer;
background-position: 4px -19px;
background-repeat: no-repeat;
}
.answer {
width: 400px;
float: left;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 20px;
background: #fff;
}
.question::before {
content: '\25B6';
color: red;
}
.active:before {
content: '\25E2';
}
a {
color: #000;
text-decoration: none
}
a:hover {
text-decoration: underline
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
i m trying to get a menu current animation so i make that :
$(document).ready(function() {
$('.menu li:eq(0)').addClass('current');
$('.menu').onePageNav();
});
// JavaScript Document
/*
* jQuery One Page Nav Plugin
* http://github.com/davist11/jQuery-One-Page-Nav
*
* Copyright (c) 2010 Trevor Davis (http://trevordavis.net)
* Dual licensed under the MIT and GPL licenses.
* Uses the same license as jQuery, see:
* http://jquery.org/license
*
* #version 3.0.0
*
* Example usage:
* $('#nav').onePageNav({
* currentClass: 'current',
* changeHash: false,
* scrollSpeed: 750
* });
*/
;(function($, window, document, undefined){
// our plugin constructor
var OnePageNav = function(elem, options){
this.elem = elem;
this.$elem = $(elem);
this.options = options;
this.metadata = this.$elem.data('plugin-options');
this.$win = $(window);
this.sections = {};
this.didScroll = false;
this.$doc = $(document);
this.docHeight = this.$doc.height();
};
// the plugin prototype
OnePageNav.prototype = {
defaults: {
navItems: 'a',
currentClass: 'current',
changeHash: false,
easing: 'swing',
filter: '',
scrollSpeed: 750,
scrollThreshold: 0.5,
begin: false,
end: false,
scrollChange: false
},
init: function() {
// Introduce defaults that can be extended either
// globally or using an object literal.
this.config = $.extend({}, this.defaults, this.options, this.metadata);
this.$nav = this.$elem.find(this.config.navItems);
//Filter any links out of the nav
if(this.config.filter !== '') {
this.$nav = this.$nav.filter(this.config.filter);
}
//Handle clicks on the nav
this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));
//Get the section positions
this.getPositions();
//Handle scroll changes
this.bindInterval();
//Update the positions on resize too
this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));
return this;
},
adjustNav: function(self, $parent) {
self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
$parent.addClass(self.config.currentClass);
},
bindInterval: function() {
var self = this;
var docHeight;
self.$win.on('scroll.onePageNav', function() {
self.didScroll = true;
});
self.t = setInterval(function() {
docHeight = self.$doc.height();
//If it was scrolled
if(self.didScroll) {
self.didScroll = false;
self.scrollChange();
}
//If the document height changes
if(docHeight !== self.docHeight) {
self.docHeight = docHeight;
self.getPositions();
}
}, 250);
},
getHash: function($link) {
return $link.attr('href').split('#')[1];
},
getPositions: function() {
var self = this;
var linkHref;
var topPos;
var $target;
self.$nav.each(function() {
linkHref = self.getHash($(this));
$target = $('#' + linkHref);
if($target.length) {
topPos = $target.offset().top;
self.sections[linkHref] = Math.round(topPos);
}
});
},
getSection: function(windowPos) {
var returnValue = null;
var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);
for(var section in this.sections) {
if((this.sections[section] - windowHeight) < windowPos) {
returnValue = section;
}
}
return returnValue;
},
handleClick: function(e) {
var self = this;
var $link = $(e.currentTarget);
var $parent = $link.parent();
var newLoc = '#' + self.getHash($link);
if(!$parent.hasClass(self.config.currentClass)) {
//Start callback
if(self.config.begin) {
self.config.begin();
}
//Change the highlighted nav item
self.adjustNav(self, $parent);
//Removing the auto-adjust on scroll
self.unbindInterval();
//Scroll to the correct position
self.scrollTo(newLoc, function() {
//Do we need to change the hash?
if(self.config.changeHash) {
window.location.hash = newLoc;
}
//Add the auto-adjust on scroll back in
self.bindInterval();
//End callback
if(self.config.end) {
self.config.end();
}
});
}
e.preventDefault();
},
scrollChange: function() {
var windowTop = this.$win.scrollTop();
var position = this.getSection(windowTop);
var $parent;
//If the position is set
if(position !== null) {
$parent = this.$elem.find('a[href$="#' + position + '"]').parent();
//If it's not already the current section
if(!$parent.hasClass(this.config.currentClass)) {
//Change the highlighted nav item
this.adjustNav(this, $parent);
//If there is a scrollChange callback
if(this.config.scrollChange) {
this.config.scrollChange($parent);
}
}
}
},
scrollTo: function(target, callback) {
var offset = $(target).offset().top;
$('html, body').animate({
scrollTop: offset
}, this.config.scrollSpeed, this.config.easing, callback);
},
unbindInterval: function() {
clearInterval(this.t);
this.$win.unbind('scroll.onePageNav');
}
};
OnePageNav.defaults = OnePageNav.prototype.defaults;
$.fn.onePageNav = function(options) {
return this.each(function() {
new OnePageNav(this, options).init();
});
};
})( jQuery, window , document );
/*------menu------ */
.menu {
margin-top: 11%;
position:fixed;
width: 50%;
right: -25%;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
z-index: 9999;
margin-right: 20px;
}
.menu li {
display: inline;
text-align: center;
}
#verti {
display: inline-block;
width: 25%;
padding: 20px 0 10px 0;
margin: 0;
text-decoration: none;
color: #333;
}
.one.current ~ hr {
margin-left: 0%;
}
.two.current ~ hr {
margin-left: 25%;
}
.three.current ~ hr {
margin-left: 50%;
}
.four.current ~ hr {
margin-left: 75%;
}
.one:hover ~ hr {
margin-left: 0%;
}
.two:hover ~ hr {
margin-left: 25%;
}
.three:hover ~ hr {
margin-left: 50%;
}
.four:hover ~ hr {
margin-left: 75%;
}
.menu hr {
height: .15rem;
width: 25%;
margin: 0;
background: rgba(0,0,0,1);
border: none;
transition: .3s ease-in-out;
}
/*------menu fin------ */
div {
margin: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
<li class="one"><a id="verti" href="#home">home</a></li><!--
--><li class="two"><a id="verti" href="#work">work</a></li><!--
--><li class="three"><a id="verti" href="#about">about</a></li><!--
--><li class="four"><a id="verti" href="#contact">contact</a></li>
<hr />
</ul>
<div id="home" class="point">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed.
Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam.
</div>
<div id="work" class="point">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed.
Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam.
Aliquam vehicula bibendum elit, quis vestibulum velit. Maecenas ut convallis nisi, ut ultricies ex. Donec semper ex id dui maximus, in interdum turpis vehicula. Sed non ultricies eros, et pretium lorem. Donec ac tortor justo. Curabitur vel sem metus. Nam quis bibendum ipsum. Donec ac magna non nulla euismod dapibus posuere fringilla velit. In elementum mauris gravida rutrum fringilla. Nulla facilisi. Praesent eu tortor interdum, iaculis elit id, tempus augue. Nunc quis arcu nec erat pharetra sodales et a enim. Donec sit amet odio vitae eros ultrices finibus ac nec nunc.
In feugiat nunc at rhoncus vestibulum. Donec blandit id risus eget consectetur. Vestibulum ac felis iaculis, maximus turpis vel, hendrerit eros. Sed sagittis erat eu ante vestibulum efficitur. Proin viverra, ligula at luctus molestie, eros urna lobortis lectus, ut fringilla odio velit a sapien. Sed ultricies ultrices tellus a facilisis. Nam viverra arcu vel purus tempus tristique. Phasellus quis pellentesque arcu, at tincidunt dui. Curabitur imperdiet lorem vel rhoncus imperdiet. Curabitur lacinia purus non lectus posuere consectetur. Ut interdum varius arcu, ac aliquet mi auctor volutpat. Curabitur quam ante, vehicula a nulla quis, porta efficitur neque. Integer ut ornare nulla. Nulla consequat, dui eget luctus placerat, turpis metus ultricies magna, a pulvinar justo mauris sit amet dui. Aliquam vestibulum malesuada sem, sit amet ultrices diam hendrerit a.
Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo.
</div>
<div id="about" class="point">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed.
Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam.
Aliquam vehicula bibendum elit, quis vestibulum velit. Maecenas ut convallis nisi, ut ultricies ex. Donec semper ex id dui maximus, in interdum turpis vehicula. Sed non ultricies eros, et pretium lorem. Donec ac tortor justo. Curabitur vel sem metus. Nam quis bibendum ipsum. Donec ac magna non nulla euismod dapibus posuere fringilla velit. In elementum mauris gravida rutrum fringilla. Nulla facilisi. Praesent eu tortor interdum, iaculis elit id, tempus augue. Nunc quis arcu nec erat pharetra sodales et a enim. Donec sit amet odio vitae eros ultrices finibus ac nec nunc.
In feugiat nunc at rhoncus vestibulum. Donec blandit id risus eget consectetur. Vestibulum ac felis iaculis, maximus turpis vel, hendrerit eros. Sed sagittis erat eu ante vestibulum efficitur. Proin viverra, ligula at luctus molestie, eros urna lobortis lectus, ut fringilla odio velit a sapien. Sed ultricies ultrices tellus a facilisis. Nam viverra arcu vel purus tempus tristique. Phasellus quis pellentesque arcu, at tincidunt dui. Curabitur imperdiet lorem vel rhoncus imperdiet. Curabitur lacinia purus non lectus posuere consectetur. Ut interdum varius arcu, ac aliquet mi auctor volutpat. Curabitur quam ante, vehicula a nulla quis, porta efficitur neque. Integer ut ornare nulla. Nulla consequat, dui eget luctus placerat, turpis metus ultricies magna, a pulvinar justo mauris sit amet dui. Aliquam vestibulum malesuada sem, sit amet ultrices diam hendrerit a.
Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo.
</div>
<div id="contact" class="point">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed.
Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam.
Aliquam vehicula bibendum elit, quis vestibulum velit. Maecenas ut convallis nisi, ut ultricies ex. Donec semper ex id dui maximus, in interdum turpis vehicula. Sed non ultricies eros, et pretium lorem. Donec ac tortor justo. Curabitur vel sem metus. Nam quis bibendum ipsum. Donec ac magna non nulla euismod dapibus posuere fringilla velit. In elementum mauris gravida rutrum fringilla. Nulla facilisi. Praesent eu tortor interdum, iaculis elit id, tempus augue. Nunc quis arcu nec erat pharetra sodales et a enim. Donec sit amet odio vitae eros ultrices finibus ac nec nunc.
In feugiat nunc at rhoncus vestibulum. Donec blandit id risus eget consectetur. Vestibulum ac felis iaculis, maximus turpis vel, hendrerit eros. Sed sagittis erat eu ante vestibulum efficitur. Proin viverra, ligula at luctus molestie, eros urna lobortis lectus, ut fringilla odio velit a sapien. Sed ultricies ultrices tellus a facilisis. Nam viverra arcu vel purus tempus tristique. Phasellus quis pellentesque arcu, at tincidunt dui. Curabitur imperdiet lorem vel rhoncus imperdiet. Curabitur lacinia purus non lectus posuere consectetur. Ut interdum varius arcu, ac aliquet mi auctor volutpat. Curabitur quam ante, vehicula a nulla quis, porta efficitur neque. Integer ut ornare nulla. Nulla consequat, dui eget luctus placerat, turpis metus ultricies magna, a pulvinar justo mauris sit amet dui. Aliquam vestibulum malesuada sem, sit amet ultrices diam hendrerit a.
Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo.
</div>
<footer>
</footer>
</section>
i want to make the opacity of the inactive menu at 0.4, the active one at 1 of course and i want that change in same time than the hr when the current event change and in hover too
someone have an idea ?
change the css from .menu li to:
.menu li {
display: inline;
text-align: center;
opacity: 0.4;
}
and add a new style for the .current class:
.current {
opacity: 1 !important;
}
I'm using http://tympanus.net/Development/PageTransitions/ for my main pages, the code below is used within a single page to showcase other different content info. All pages coded are in one index file.
The code below is used to switch between divs.
I tried using simple javascript onclick to make the pages fadeIn/fadeOut but it couldn't work.
jQuery:
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i = 0; i < sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container' + idInfo).style.display = 'block';
}
$("#fade").click(function () {
$('#container1').fadeOut('slow');
$('#container2').fadeIn('slow');
});
</script>
CSS:
<style type="text/css">
#container1, #container2, #container3 {
display:none;
width:100%;
height:auto;
}
</style>
HTML:
<img src="img/thumbnail1.png" /><br>click to see content 1
<img src="img/thumbnail2.png" /><br>click to see content 2
<img src="img/thumbnail3.png" /><br>click to see content 3
<div id="container1">content1</div>
<div id="container2">content2</div>
<div id="container3">content3</div>
Just need the .onclick fade effect to work after clicking on the link.
Many thanks in advance!
I think that this is what you are aiming for:
Online Demo
HTML:
<div class="links">
click to see content 1
click to see content 2
click to see content 3
</div>
<div class="content-divs">
<div>content0</div>
<div>content1</div>
<div>content2</div>
</div>
JavaScript:
$(".links a").click(function () {
var id = $(this).data('toggle');
showDiv(id);
});
function showDiv(id) {
// hide all other
var divs = $('.content-divs');
divs.children().each(function(index) {
$(this).hide();
});
// fade the correct one in.
divs.children('div:nth-child('+id+')').fadeIn();
}
Same css.
Since you are already using jQuery, why not use all it's functions?
You could do that with onclick="showDiv(id)", but jsfiddle does not work with that, so .data('toggle') is a nice workaround.
It seems you may be making this a little bit more complicated then it needs to be, try this out:
<script type="text/javascript">
$(document).ready(function(){
var curr = 1
$('.fader').click(function(){
var next_attr = $(this).data('num');
if(curr != next_attr){
$('div[data-num="'+curr+'"]').hide(1000, function(){
$('div[data-num="'+next_attr+'"]').show(1000);
});
curr = next_attr
}
});
});
</script>
Here is the html
<div class="links">
<a class=".fader" data-num="1">Show Container 1</a>
<a class=".fader" data-num="2">Show Container 2</a>
<a class=".fader" data-num="3">Show Container 3</a>
</div>
<div class="containers">
<div id="container1" data-num="1">Container 1</div>
<div id="container2" data-num="2">Container 2</div>
<div id="container3" data-num="3">Container 3</div>
</div>
and here is the css
#container2, #container3{
display:none;
width:100%;
height:auto;
}
that should give you the ability to switch between the 3 containers by clicking the links corresponding to them. I used a data attribute to link the containers to there links. When a link is clicked it looks for div with the same data-num and fades out the current one once its faded out it fades in the new one and sets the curr variable.
You can actually do this in pure CSS. (Not supported for IE 8-)
http://jsbin.com/eVeNeSO/1/edit
CSS:
body {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
background-color: #001;
}
/* Header Styling and Positioning */
#container ul {
list-style:none;
margin: 2em 0;
padding: 0;
text-align: center;
font-size: 1.5em;
}
#container li {
display: inline;
margin: 0 1em;
}
#container li a {
margin: 0 1em;
color: #09b;
text-decoration: none;
background: #333;
padding: .6em;
border-radius: 25em;
}
#container li a:hover {
color: #099;
background: #444;
}
#container li a:active {
color: #066;
background: #222;
}
/* Content Area */
.content div {
width: 50%;
margin: 2em auto;
padding: 1em;
background: #333;
border: 1em solid #555;
color: #fff;
}
/* hide unselected targets */
.content div:not(:target) {
display: none;
}
/* display selected target */
:target {
display: inherit;
}
HTML:
<article id="container">
<ul>
<li>About</li>
<li>Contact</li>
<li>Services</li>
</ul>
<div class="content">
<div id="about">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at feugiat odio. Proin sit amet eros ac diam tempus tempor. Fusce gravida ut nisi in consectetur. Sed hendrerit sapien id metus adipiscing, id vehicula lacus fermentum. Proin mollis facilisis erat, eu sollicitudin diam scelerisque ut. Phasellus non mollis nisl. Vestibulum ac mi quis metus mollis fermentum. Donec pharetra consequat lacinia. Vestibulum porta tortor purus, non fermentum turpis congue eget. Nulla varius augue dolor, at pellentesque diam volutpat in. Vestibulum vitae ligula eu eros tristique accumsan. Mauris sagittis iaculis lorem id egestas. Suspendisse potenti. Cras faucibus dolor turpis, ac ultrices dolor rhoncus a.
<p>Etiam aliquam magna vitae hendrerit accumsan. Nam venenatis risus a tempor semper. Nullam ac est nec dolor pellentesque laoreet ac ac nisi. Ut sit amet magna nunc. Vestibulum orci ipsum, pretium nec venenatis vel, lacinia et magna. Proin dignissim dui ligula, eget pretium nisl ultrices eu. Etiam sit amet nunc non nisl scelerisque dignissim a sed sapien.</p>
<p>Quisque auctor sit amet mi sed porta. Fusce nec erat eros. Suspendisse et diam sit amet quam pretium sollicitudin quis nec enim. Nam fermentum risus dui, non volutpat dolor pellentesque nec. Quisque interdum, neque eu feugiat hendrerit, risus augue malesuada mauris, non vestibulum ante erat quis purus. Nunc scelerisque sapien vel leo bibendum, vel dapibus ipsum ultricies. Cras commodo lacus quis nunc eleifend iaculis. Nam adipiscing ipsum non justo ultrices, sit amet vestibulum urna vehicula. Praesent porttitor neque et dictum euismod. Aliquam erat volutpat. Nam adipiscing, neque ut dictum ultricies, dui odio aliquet dui, ac rhoncus neque nulla a enim.</p>
</div>
<div id="contact">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut purus leo, varius pellentesque vestibulum at, lobortis quis est. Suspendisse mattis leo vel eros faucibus adipiscing. Phasellus sed nisl eu lectus blandit dignissim vel id nibh. Donec rutrum felis urna, sed elementum urna venenatis quis. Praesent vel tortor sed felis sodales lobortis eget eget nulla. Aliquam bibendum elit eu nunc facilisis, varius tempor lectus mattis. Aenean sed aliquet orci. Aliquam viverra molestie ultrices.
<p>Nullam luctus imperdiet risus, vel convallis massa interdum id. In ultricies pulvinar libero vitae sodales. Fusce eleifend varius tincidunt. Nulla sed blandit nibh. Ut sollicitudin, metus et sagittis tincidunt, nisl felis ultricies ante, eu dapibus massa odio sed nunc. Pellentesque semper eros dui, ac mollis nunc dictum non. Quisque ultrices sapien at velit pellentesque, at lacinia est commodo. Morbi commodo in neque eu tempor. Curabitur eu mattis diam, eu tristique mauris.</p>
<p>Suspendisse sit amet lacus rutrum, faucibus augue vitae, euismod nibh. Mauris aliquet nisi in nibh aliquam, et ullamcorper turpis mattis. Vestibulum ut hendrerit libero, eu ultricies odio. Etiam sodales vehicula dignissim. Vestibulum libero tellus, luctus sed imperdiet quis, malesuada sed nunc. In aliquet pellentesque erat pellentesque fringilla. Aenean egestas ipsum eu nunc auctor, nec vestibulum est varius. Integer convallis, orci sit amet sagittis hendrerit, purus ligula dictum dolor, in lobortis ligula lacus pulvinar lorem. Sed pulvinar porttitor egestas. Duis ac ante ipsum. Donec sem odio, sollicitudin in fermentum egestas, gravida sed diam. Nam condimentum augue ut ligula dapibus sodales. Donec blandit sem non cursus aliquam.</p>
</div>
<div id="services">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus posuere porta suscipit. In ac purus quis lectus blandit rutrum eu vitae nisi. Nunc vel ante at enim imperdiet ultrices et non erat. Vestibulum sagittis facilisis nulla. Ut quis turpis sit amet enim volutpat tincidunt. Vivamus vel ornare neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis tincidunt mi et ipsum cursus, vitae tincidunt ipsum fringilla. Integer eu mollis elit, in tincidunt neque.
<p>Maecenas ac est gravida, iaculis mauris vitae, tempus enim. Mauris ut nisi dapibus, commodo massa sed, iaculis augue. Cras sit amet leo libero. Mauris ac dui lorem. Aenean velit risus, ornare molestie neque ac, feugiat cursus tellus. Duis commodo lacinia felis, vitae aliquam mauris consectetur cursus. Donec arcu orci, sollicitudin eu lacus id, ultricies sollicitudin ligula. Vivamus ac egestas ipsum. Duis aliquam suscipit tristique. Vestibulum aliquet bibendum arcu, in adipiscing arcu sagittis ut. Aenean in leo risus. Morbi vitae nibh in eros accumsan consequat in ac lacus. Maecenas pretium mattis justo non euismod. Sed vel velit sollicitudin, posuere mi nec, dictum lectus.</p>
<p>Nullam nisl nisi, dignissim ultrices cursus id, aliquet vel purus. Praesent velit purus, pharetra id eros id, viverra ultricies velit. Phasellus sed lacinia neque, at dictum odio. Mauris eget accumsan augue, ac imperdiet magna. Proin commodo sem id purus vulputate mollis. Nunc a dignissim urna. Nam facilisis, lectus sit amet blandit egestas, velit tortor imperdiet massa, eu elementum lorem dolor nec diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus sit amet nisl turpis. Nulla vel nulla ut odio feugiat ultrices. Ut id consequat sem.</p>
</div>
</div>
</article>