I have a page name url.com/yourfirstpage/ when i go to the page all the div are hidden by default (display:none)
if we target #sec1 as url.com/yourfirstpage/#sec1 it only displays sec1 and hide others.
I was wondering if we go the url without having anchor id like url.com/yourfirstpage/ it needs to show all the divs.
#sec1, #sec2, #sec3{
display:none;
}
#sec1:target{
display:block;
}
#sec2:target{
display:block;
}
#sec3:target{
display:block;
}
sec1
sec2
sec3
<div id="sec1" class="page"> this is sec1</div>
<div id="sec2" class="page"> this is sec2</div>
<div id="sec3" class="page"> this is sec3</div>
Here is a trick in case you are able to modify your HTML structure. The idea is to have the elements visible and then we hide them using :target. Since we don't have previous sibling selector or parent selector, I used id within a parent element to be able to select any element:
#sec1:target .page:nth-child(n+2){
display: none;
}
#sec2:target .page:nth-child(2n+1){
display: none;
}
#sec3:target .page:nth-last-child(n+2){
display: none;
}
sec1
sec2
sec3
<div id="sec1">
<div id="sec2">
<div id="sec3">
<div class="page"> this is sec1</div>
<div class="page"> this is sec2</div>
<div class="page"> this is sec3</div>
</div>
</div>
</div>
It can work with any number of sections and we can improve the CSS code as follow:
#sec1:target .page:not(:nth-child(1)),
#sec2:target .page:not(:nth-child(2)),
#sec3:target .page:not(:nth-child(3)),
#sec4:target .page:not(:nth-child(4)),
#sec5:target .page:not(:nth-child(5)) {
display: none;
}
sec1
sec2
sec3
sec4
sec5
<div id="sec1">
<div id="sec2">
<div id="sec3">
<div id="sec4">
<div id="sec5">
<div class="page"> this is sec1</div>
<div class="page"> this is sec2</div>
<div class="page"> this is sec3</div>
<div class="page"> this is sec4</div>
<div class="page"> this is sec5</div>
</div>
</div>
</div>
</div>
</div>
this quick approach may help
you can do with ! selector in CSS by using postcss plugins
[...document.querySelectorAll('a')].forEach(a => {
a.addEventListener('click', () => {
a.parentElement.classList.add('targeted')
})
})
.targeted div {
display: none;
}
.targeted div:target {
display: block;
}
sec1
sec2
sec3
<div id="sec1" class="page"> this is sec1</div>
<div id="sec2" class="page"> this is sec2</div>
<div id="sec3" class="page"> this is sec3</div>
Related
I know this might be a repeat question but I still need help. I am creating a website that when a button is clicked on, the text will appear. I have it hidden in a div using display: none on a class. When I'm testing the site ill click the button and nothing happens. There are no errors on the console so I'm assuming its an issue with Jquery not being installed correctly (I did use the npm install jquery).
$(function(){
$(".button").click(function(){
$(".projectTextInfo").toggleClass(".show");
});
});
.projectTextInfo {
position: relative;
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row justify-content-start">
<div class = "mr-4 mb-5 monxProject col-md-6 col-sm-6">
<div class = "caption">
<h4 class="project-text"> Ludem Dare </h4>
</div>
<div class = "thumbnail">
<img class="projectIcon" src = "http://monxcleyr.net/images/mainsite/LDsmall.png">
<button class="button">Test</button>
<div class="projectTextInfo">
<p>Howdy</p>
</div>
</div>
</div>
toggleClass(".show") is wrong , it is toggleClass("show"). Try it:
$(function(){
$(".button").click(function(){
$(".projectTextInfo").toggleClass("show");
});
});
.projectTextInfo {
position: relative;
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row justify-content-start">
<div class = "mr-4 mb-5 monxProject col-md-6 col-sm-6">
<div class = "caption">
<h4 class="project-text"> Ludem Dare </h4>
</div>
<div class = "thumbnail">
<img class="projectIcon" src = "http://monxcleyr.net/images/mainsite/LDsmall.png">
<button class="button">Test</button>
<div class="projectTextInfo">
<p>Howdy</p>
</div>
</div>
</div>
I am new to jQuery. Trying to hide the first div and show second div. When I again click on 2nd div, it will show me the first div.
Here is my code.
$(".c1").on('click', function() {
$(".one").fadeIn();
$(".two").fadeOut();
});
$(".c2").on('click', function() {
$(".two").fadeIn();
$(".one").fadeOut();
});
.right {
font-size: 20px;
float: right;
margin-right: 50px;
}
.ab-container {
margin-bottom: 50px;
}
.container {
padding: 30px 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 Click to see div 2</h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two">
<div class="ab-head ">
<h1>This is div 2 Click to see div 1</h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>
You have your fadeOut and fadeIn calls inverted.
You need to prevent the a link behavior.
Pass as callback your fadeIn call.
Look at this code snippet with those fixes
I've added a hide class to show how the DIVs appear and disappear.
$(".c1").on('click', function(e) {
e.preventDefault();
$(".one").fadeOut(function() {
$(".two").fadeIn();
});
});
$(".c2").on('click', function(e) {
e.preventDefault();
$(".two").fadeOut(function() {
$(".one").fadeIn();
});
});
.right {
font-size: 20px;
float: right;
margin-right: 50px;
}
.ab-container {
margin-bottom: 50px;
}
.container {
padding: 30px 60px;
}
.hide {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 Click to see div 2</h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two hide">
<div class="ab-head ">
<h1>This is div 2 Click to see div 1</h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>
See? now is working your logic!
First, it will work better if you use spans instead of links
The nyou have the order of fadein/fadeout confused:
$(".c1").on('click', function() {
$(".two").fadeIn();
$(".one").fadeOut();
});
$(".c2").on('click', function() {
$(".one").fadeIn();
$(".two").fadeOut();
});
.right {
font-size: 20px;
float: right;
margin-right: 50px;
}
.ab-container {
margin-bottom: 50px;
}
.container {
padding: 30px 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 <span class="right c1"> Click to see div 2</span></h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two">
<div class="ab-head ">
<h1>This is div 2 <span class="right c2"> Click to see div 1</span></h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>
Your code is working you only need to remove the href="" from your <a> tag. However, here is my way of doing it if you like to take a look. And the edited version of the HTML
$('.c1').click(function () {
$('.one').fadeIn();
$('.two').fadeOut();
})
$('.c2').click(function () {
$('.two').fadeIn();
$('.one').fadeOut();
})
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 <a class="right c1"> Click to see div 2</a></h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two">
<div class="ab-head ">
<h1>This is div 2 <a class="right c2"> Click to see div 1</a></h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>
Sorry if this is a really obvious problem to solve. What I am trying to do is have a div, when selected is replaced with another div with the option to revert "back" to the old div when "back" is clicked.
This is what I have so far:
$(document).ready(
function() {
$("#display-one").click(function() {
$("#display-two").fadeToggle();
$("#display-one").fadeToggle();
});
});
#display-two {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="header">
<div id="display-one">Dispay One</div>
</div>
<div id="display-two">
<p>Display Two</p>
<h3>
<div id="back">
back
</div>
</h3>
</div>
Here is a JSFiddle: https://jsfiddle.net/uL8z87r7/1/
Thanks in advance for any help and tips!
-John
Just add #back a to your selector so it will be $("#display-one, #back a")
$("#display-one, #back a").click(function() {
$("#display-two").fadeToggle();
$("#display-one").fadeToggle();
});
#display-two {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<div id="display-one">Dispay One
</div>
</div>
<div id="display-two">
<p>Display Two
</p>
<h3>
<div id="back">
back
</div>
</h3>
</div>
You have to add listener for the back button
$(document).ready(
function() {
$("#display-one,#back").click(function() {
$("#display-two").fadeToggle();
$("#display-one").fadeToggle();
});
});
$(document).ready(function() {
$("#display-one, #back").click(function() {
$("#display-one, #display-two").fadeToggle();
});
});
#display-two {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="header">
<div id="display-one">Dispay One</div>
</div>
<div id="display-two">
<p>Display Two</p>
<h3>
<div id="back">
back
</div>
</h3>
</div>
My markup like this:--
<div class="wrap">
<div class="a"></div>
<div class="a"></div>
<button type="button">press</button>
</div>
.
.
.
<div class="wrap">
<div class="z"></div>
<button type="button">press</button>
</div>
I want when I click the button it clone only one closest siblings and insert the clone div after the last siblings within relative parent div.wrap. I know how to clone with jQuery but I couldn't insert the cloned div after last siblings within relative parent .
You can use .before() to insert before the button and .prev() to clone the div above the button:
$('.wrap > button').on('click', function() {
$(this).before( $(this).prev().clone() );
});
$('.wrap > button').on('click', function() {
$(this).before( $(this).prev().clone() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="a">A1</div>
<div class="a">A2</div>
<button type="button">press</button>
</div>
<div class="wrap">
<div class="z">Z1</div>
<button type="button">press</button>
</div>
If I understand correctly, you should be able to use .prev() to find the previous div, then append a clone using .after().
$(".wrap button").click(function() {
var prev = $(this).prev("div");
prev.after(prev.clone());
});
div {
margin: 5px;
}
.a {
height: 100px;
width: 100px;
background-color: green;
}
.z {
height: 100px;
width: 100px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="a"></div>
<button type="button">press</button>
</div>
<div class="wrap">
<div class="z"></div>
<button type="button">press</button>
</div>
if i correctly understood problem
$('button').on('click', function(){
var siblings = $(this).siblings();
siblings.last().clone().insertAfter(siblings.last() )
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="a">a1</div>
<div class="a">a2</div>
<button type="button">press</button>
</div>
.
.
.
<div class="wrap">
<div class="z">z1</div>
<button type="button">press</button>
</div>
I need to add to this script to make the webpage open a tab on page load.
How can I do this?
I am thinking there is just a JavaScript command I am missing. I just for the life of my cant see it.
JavaScript:
$(document).ready(function(){
$('.tabs').each(function(){
var tab = $(this);
tab.find('.tab_content').hide(); // Hide all divs
tab.find('ul.tab_nav li a').click(function(){ //When any link is clicked
if($(this).hasClass('current_tab')) return false;
tab.find('ul.tab_nav li a').removeClass('current_tab');
$(this).addClass('current_tab'); //Set clicked link class to active
var currentTab = tab.find($(this).attr('href'));
tab.find('.tab_content').hide(); // Hide all divs
$(currentTab).slideDown(); // Show div with id equal to variable currentTab
return false;
});
});
});
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" media="screen" href= "D:\WP\css\style.css"/>
<script src="D:\WP\script\jquery1.9.1.js"></script>
<script src="D:\WP\script\easing.js"></script>
<script src="D:\WP\script\tabs.js"></script>
</head>
<body>
<!--Web page box-->
<div id="tab_style" class="box tabs">
<!--Header start-->
<div id="header">
<ul class="tab_nav">
<li>Home</li>
<li>About</li>
<li>Consulting</li>
<li>Social</li>
<li>Contact</li>
</ul>
</div>
<!--header end-->
<!--contents of site begin-->
<div class="content">
<div id="about" class="tab_content">
<br/>3
<br/>3
<br/>3
</div>
<div id="contact" class="tab_content"></div>
<div id="footer">
<p></p>
</div>
<!--footer ends-->
</div>
<!--contents end here-->
</div>
<!--Web page box end-->
</body>
This might not be the answer you were hoping for, but I just want to suggest that you start with something a little bit less convoluted than the code you posted.
Tabs can be easy: when a tab is clicked, just deactivate the current tab+panel and activate the new one.
Here is a quick demo I just threw together to show you:
HTML:
<div class="tabs">
<span class="tab" data-tab="thing1">Thing 1</span>
<span class="tab" data-tab="thing2">Thing 2</span>
<span class="tab" data-tab="thing3">Thing 3</span>
</div>
<div class="panels">
<div class="panel" data-tab="thing1">
<h2>Thing 1</h2>
<p>blah blah</p>
</div>
<div class="panel" data-tab="thing2">
<h2>Thing 2</h2>
<p>foo bar</p>
</div>
<div class="panel" data-tab="thing3">
<h2>Thing 3</h2>
<img src="http://slodive.com/wp-content/uploads/2014/03/funny-bab.jpg">
</div>
</div>
JavaScript:
// hook tab clicks:
$('body').on('click', '.tab', show);
// show first tab:
show('.tab');
function show(tab) {
// accepts an Event or a CSS selector:
tab = $(tab.target || tab).attr('data-tab');
// de-activate current tab:
$('[data-tab].active').declassify('active');
// activate new tab:
$('[data-tab="'+tab+'"]').classify('active');
}
CSS:
.tab {
display: block;
float: left;
padding: 5px 10px;
margin: 0 5px;
background: #FFF;
transform-origin: 0 100%;
transition: all 500ms ease;
cursor: pointer;
}
.tab:not(.active) {
opacity: 0.5;
transform: perspective(1000px) rotateX(30deg);
}
.panel {
background: #FFF;
padding: 20px;
}
.panel:not(.active) {
display: none;
}
JSFiddle Demo: http://jsfiddle.net/developit/42zcagjb/