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>
Related
In my application there are a lot of buttons inside a div.
Initially I am showing three buttons in div width 400 px. Overflow:hidden will hide the remaining elements. I have added below css for div, having right arrow button in my application.
Can anybody body tell how I, if user clicks arrow button, can show next button elements occupying the same width in jquery? If user clicks again I need to show remaining elements up to last element
My html structure is below
.parentdiv {
display: inline-flex width:400px;
overflow: hidden;
}
<div class="parentdiv">
<div class="childdiv">
<span> Text1
<button>button1 </button>
</span>
</div>
<div class="childdiv">
<span> Text2 lorem ipsum
<button>button2 </button>
</span>
</div>
<div class="childdiv">
<span> Text3 lorem ipsum
<button>button3 </button>
</span>
</div>
<div class="childdiv">
<span> Text4 lorem ipsum
<button>button4 </button>
</span>
</div>
<div class="childdiv">
<span> Text5 lorem ipsum
<button>button5 </button>
</span>
</div>
<div class="childdiv">
<span> Text6 lorem ipsum
<button>button6 </button>
</span>
</div>
What you want to do is.... a LOT more complicated than you think it is, and will require a lot of javascript.
It's usually not worth it to try to reinvent the wheel by hand. The correct solution to accomplish what you want is to use a "carousel" plugin. (Many, many different people have created plugins like this. You can simply google for it.)
If you are using Wordpress, then you should search for a Wordpress plugin.
If you simply want a plug-and-play solution that will work with any website, Slick is the best carousel plugin that I know of, and it works great with jQuery.
Using jQuery you can achieve that.
jQuery library is required
clicked = 1;
divSW = document.getElementByClassName('parentdiv').scrollWidth;
$('button#nxtBtn').click(function(){
divSL = $('div.parentdiv').scrollLeft();
if(divSW > divSL){
clicked++;
divW = $('div.parentdiv').width();
moveW = divW * clicked;
$('div.parentdiv').animate({
scrollLeft : moveW
})
}
})
But you need to add a next button in your HTML code with an id attribute of nxtBtn
<button id="nxtBtn">next</button>
If you need to see the previous buttons in the div you will add another button to your HTML code with an id of prvBtn.
<button id="prvBtn">previous</button>
Then you also add this code below
$('button#prvBtn').click(function(){
divSL = $('div.parentdiv').scrollLeft();
if(divSL > 0){
clicked--;
divW = $('div.parentdiv').width();
moveW = divW * clicked;
$('div.parentdiv').animate({
scrollLeft : moveW
})
}
})
$("#after").on("click", function() {
for (var i = 0; i < 3; i++)
$(".childdiv:not(.show)").eq(0).addClass("show");
});
#after {
background: lightgrey;
display: block;
width: 250px;
text-align: center;
padding: 2px 0;
cursor: pointer;
border-radius: 5px;
margin-top: 5px;
}
#after:hover {
text-decoration: underline;
}
.childdiv {
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentdiv">
<div class="childdiv show">
<span> Text1
<button>button1 </button>
</span>
</div>
<div class="childdiv show">
<span> Text2 lorem ipsum
<button>button2 </button>
</span>
</div>
<div class="childdiv show">
<span> Text3 lorem ipsum
<button>button3 </button>
</span>
</div>
<div class="childdiv">
<span> Text4 lorem ipsum
<button>button4 </button>
</span>
</div>
<div class="childdiv">
<span> Text5 lorem ipsum
<button>button5 </button>
</span>
</div>
<div class="childdiv">
<span> Text6 lorem ipsum
<button>button6 </button>
</span>
</div>
<a id="after">after \/</a>
</div>
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>
I'm trying to write JQuery for a set of animated info boxes. Clicking on the title div.info-box__title should open the adjacent div.info-box__content and at the same time close any other open div.info-box__content
Update - should have specified, I also need ALL boxes to close when user clicks outside any .info-box.
Update 2 - Fiddle here: https://jsfiddle.net/q9orfsoy/
The markup is like this:
<section id="info-box-3" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
I always struggle with execution order issues with JS. What I have so far are two functions:
Opening:
$('.info-box__title').bind("click touchstart", function() {
// close the others and open this one
if($(this).next('.info-box__content').css('display') == 'none') {
$(this).next('.info-box__content').slideDown();
$(this).parents('.info-box').addClass('open');
$(this).parents('.info-box.open').siblings().children('.info-box__title').hide();
}
});
Closing:
// hide all when click anywhere else in the document
$(document).bind("click touchstart", function(event) {
// exclude the one that's currently open
if(!$(event.target).closest('.info-box.open').length){
$('.info-box__content').slideUp(function(){
$(this).parents('.info-box').removeClass('open');
});
}
});
What this code does is closes all the info-box__content divs when you click outside them. But if you click on another info-box__title it just opens that as well without closing the rest.
(Initially I thought adding a class of .open to the one that's opened would be enough, but I guess I've run into execution order issues?)
What's the best/recommended way to deal with something like this?
Try utilizing .index() , jsfiddle https://jsfiddle.net/q9orfsoy/1/
var titles = $(".info-box__title");
var content = $(".info-box__content");
titles.on("click touchstart", function(e) {
if ($(this).next(".info-box__content")
.is(":visible")) {
$(this).next(".info-box__content")
.slideUp()
} else {
content.slideUp()
.eq($(this).index(".info-box__title"))
.slideDown()
}
});
// ALL boxes to close when user clicks outside any `.info-box`
$(document).on("click touchstart", function(e) {
if ($(e.target).is(".info-box, .info-box *")) {
return
}
else {
content.slideUp()
}
})
.info-box__content {
display: none;
}
.info-box {
border: 1px solid black;
padding; 20px;
margin:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<section id="info-box-1" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title 1</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
<section id="info-box-2" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title 2</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
<section id="info-box-3" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title 3</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
Close all then open the one you want with the this object.
$('.info-box__title').click(function() {
$('.info-box__content').hide(); //or perform closing action
$(this).siblings('.info-box__content').show(); //or perform opening action
});
To close when clicking outside of any info box,
$('body').not('.info-box').click(function() {
$('.info-box__content').hide(); //or perform closing action
});
Here is a solution.
$('.info-box__title').click(function() {
var sibling = $(this).siblings('.info-box__content');
if(!sibling.is(':visible')){
$('.info-box__content:visible').slideUp();
sibling.slideDown(); }
else sibling.slideUp();
});
$(document).bind("click touchstart", function(e)
{
var open_content = $(".info-box__content:visible");
if (!open_content.parent().is(e.target)
&& open_content.parent().has(e.target).length === 0)
{
open_content.slideUp();
}
});
.info-box__title{background:grey;}
.info-box__content{
height:100px;
display:none;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section id="info-box-3" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
<section id="info-box-4" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
<section id="info-box-5" class="info-box">
<div class="centerer">
<div class="info-box__close"></div>
<div class="info-box__title">
<h1>Title</h1>
</div>
<div class="info-box__content">
<p>content</p>
</div>
</div>
</section>
You could do:
$(document).bind("click touchstart", function(event) {
var $openBox = $(event.target).closest('.open');
$('.info-box__content').not($openBox).slideUp(function(){
$(this).parents('.info-box').removeClass('open');
});
});
This will select all boxes other than the one related to the click event.
Bonus explanation
The reason your current solution doesn't work is that your just checking to see if the open box exists, since it does, it then closes all elements with the class `.info-box__content'. Hope that makes sense!
Easily slideUp all class while using stop() to slideDown() or slideToggle() target section:
$('.info-box__title').click(function() {
$('.info-box__content').stop().slideUp();
$(this).find('.info-box__content').stop().slideDown();
});
$('body').not('.info-box').click(function() {
$('.info-box__content').stop().slideUp();
});
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/
So basically I am making some concept logic for a project I am working on. It's a portfolio with boxes of images and I want to be able to change the value of a h2 to some description text based on the box that was hovered on.
Right now it's just a black box so 'square1, square2, square3...etc' will work for now. I looked up some stuff on jquery and found this link from a stackoverflow answer. This does what I need but is only shifting through one piece of information instead of many in my case.
Wondering how I can achieve that via jquery. I imagine I would need to make an array with all the descriptions I need, and (this is where I am lost) somehow attach the value of array to the square and then from there change text of h2 to the array value.
Thanks for any help in advance here's what I have so far (not much just did some foundation work). Not sure if this matters but if there is no hover I want the h2 to say nothing.
HTML (makes me post code if I have jsfiddle)
<div class="squares">
<div class="square1"></div>
<div class="square2"></div>
<div class="square3"></div>
<div class="square4"></div>
<div class="square5"></div>
<h2 class="squareIdent"> </h2>
</div>
You can implement this using data attribute to hold your description that you want your box to load in the h2 -
Working Example - http://codepen.io/nitishdhar/pen/CdiHa
Explanation
Write your HTML in this structure -
<div class="squares">
<div class="square" data-content="Alpha"></div>
<div class="square" data-content="Beta"></div>
<div class="square" data-content="Gamma"></div>
<h2 class="square-data-holder"></h2>
</div>
Notice I have added data-content that will hold whatever text you want it to hold. We will use this to extract the same when we have to fill it in the h2.
Use this jQuery snippet to achieve the hover effect -
$(document).ready(function() {
$('.square').hover(
function() {
$('.square-data-holder').text($(this).data('content')).fadeIn('slow');
}, function() {
$('.square-data-holder').fadeOut('slow');
});
});
hover() takes two handlers to handle hover in & hover out - $( selector ).hover( handlerIn, handlerOut ), Refer - http://api.jquery.com/hover/
So on hover of any of the div's with class square, we get hold of the content of the div that was hovered using -
$(this).data('content')
And we append the same to the h2 element. On hover out, we just make h2 empty.
This should do what you want.
Judging by the example at http://danielmarkiewicz.com/ it looks like you may need to have formatted content inserted into the heading. Here is one approach to do that with HTML content inside each square.
Demo here
HTML
<div class="squares">
<div class="square square1">
<span class="heading">
<h1>Square 1</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square2">
<span class="heading">
<h1>Square 2</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square3">
<span class="heading">
<h1>Square 3</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square4">
<span class="heading">
<h1>Square 4</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square5">
<span class="heading">
<h1>Square 5</h1>
<h2>Details</h2>
</span>
</div>
<header class="squareIdent"></header>
</div>
CSS
.heading { display: none; } // Hide the heading content within Squares
JavaScript
$(document)
.on('mouseover', '.square', function(e) {
var self = $(this),
headingContent = self.find('.heading').first().html();
$('.squareIdent', self.closest('.squares')).html(headingContent);
})
.on('mouseout', '.square', function(e) {
var self = $(this);
$('.squareIdent', self.closest('.squares')).html(null);
})
;
DEMO
I am probablly late as Nitish already gave a good answer but here is what i have done.
HTML:
<div class="squares">
<div class="square1" data-text="I am Square 1"></div>
<div class="square2" data-text="I am Square 2"></div>
<div class="square3" data-text="I am Square 3"></div>
<div class="square4" data-text="I am Square 4"></div>
<div class="square5" data-text="I am Square 5"></div>
<h2 class="squareIdent"> </h2>
</div>
CSS:
div.square1, div.square2, div.square3, div.square4, div.square5
{
height: 100px;
width: 100px;
background-color: black;
margin-left: 126px;
margin-top: 150px;
float: left;
}
div.squares
{
margin-left: 175px;
}
.squareIdent{
opacity: 0;
}
JS:
$(".squares > *").hover(function(){
$(".squareIdent").text($(this).attr("data-text"));
$(".squareIdent").stop().animate({
opacity: 1
}, 500);
}, function(){
$(".squareIdent").stop().animate({
opacity: 0
}, 500);
});
Note i have added the Animation as you showed in your question.