Develop Reference

How can I make it so only the tab area loads instead of the page jumping to the top after clicking on tab?

As the title states, I'm making a tabbed section to switch content upon click which works fine, how can I make it so upon clicking a new tab it has a smooth transition to the content as well as prevent jumping to the top of the page every time I click a tab?
I've tried adding the function which prevents it for links but this isn't a link so that doesn't seem to be working.
HTML
<section class="featured-books">
<div class="featured-books-title"><h2>Featured Books</h2></div>
<ul class="tabs">
<li data-tab-target="#featured" class="active tab">Featured</li>
<li data-tab-target="#on-sale" class="tab">On Sale</li>
<li data-tab-target="#most-viewed" class="tab">Most Viewed</li>
</ul>
<div id="featured" data-tab-content class="active">
<div class="featured-tab">
<img src="./images/12-rules.jpg">
<img src="./images/7-habits.jpg">
<img src="./images/art-of-war.jpg">
<img src="./images/boundaries.jpg">
<img src="./images/unlimited-memory.jpg">
<img src="./images/meaning-of-marriage.jpg">
<img src="./images/meditations.jpg">
<img src="./images/peaceful-parents.jpg">
<img src="./images/plant-paradox.jpg">
<img src="./images/spirit-filled-life.jpg">
<img src="./images/javascript-definitive-guide.jpg">
<img src="./images/atomic-habits.jpg">
</div>
</div>
<div id="on-sale" data-tab-content>
</div>
<div id="most-viewed" data-tab-content>
</div>
</section>
CSS
.featured-books h1 {
display: flex;
justify-content: center;
}
[data-tab-content] {
display: none;
}
.active[data-tab-content] {
display: block;
}
.tabs {
display: flex;
justify-content: center;
list-style-type: none;
margin: 0;
padding-bottom: 60px;
padding-top: 16px;
}
.tab {
border-radius: 20px;
cursor: pointer;
padding: 10px;
}
.tab.active {
background-color: #CCC;
}
.tab:hover {
background-color: #aaa;
}
/**------FEATURED TAB CONTENT------*/
.featured-tab {
position: absolute;
justify-content: center;
align-items: center;
margin-top: 10px;
width: 100vw;
display: grid;
grid-template-columns: repeat(auto-fill,minmax(300px,300px));
column-gap: 3px;
row-gap: 40px;
}
.featured-tab img {
width: 180px;
height: auto;
object-fit: cover;
object-position: center;
}
JavaScript
const tabContents = document.querySelectorAll('[data-tab-content]')
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document.querySelector(tab.dataset.tabTarget)
tabContents.forEach(tabContent => {
tabContent.classList.remove('active')
})
tabs.forEach(tab => {
tab.classList.remove('active')
})
tab.classList.add('active')
target.classList.add('active')
})
})

Here is a simple example using a opacity transition but you can use height, width or transform if you would like. I use aria-attributes to keep track of things like which article is open and if the information in the article should be picked up by screen readers. The two most important CSS classes are show and hide. These control the opacity and when the transition takes place. Show has a slight delay so it waits for the one being hidden to get out of the way. As far as the JavaScript.
Select all the buttons that have popups.
Create a event listener to handle the click.
Select the controlled article and all the articles.
Check if the controlled article is currently hidden.
If it is hide all the artiles.
Change all the buttons aria-expanded attributes to false.
Set the aria-expanded attribute on the clicked button to true.
Set aria-hidden class on the controlled article to false.
Remove the hide class and add the show class to the controlled article.
const buttons = document.querySelectorAll("[aria-haspopup=true]")
const handleClick = (event) => {
const controls = event.target.getAttribute("aria-controls"),
controlled = document.getElementById(controls),
articles = document.querySelectorAll("article");
if (controlled.getAttribute("aria-hidden") === "true") {
articles.forEach(article => {
article.setAttribute("aria-hidden", "true");
article.classList.add("hide");
article.classList.remove("show");
})
buttons.forEach(button => button.setAttribute("aria-expanded", "false"))
event.target.setAttribute("aria-expanded", "true");
controlled.setAttribute("aria-hidden", "false");
controlled.classList.remove("hide");
controlled.classList.add("show");
}
}
buttons.forEach(button => {
button.addEventListener("click", handleClick);
})
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
margin-right: 10px;
}
article {
height: calc(100vh - 50px);
width: 100vw;
position: absolute;
top: 50px;
left: 0;
}
#feature {
background-color: red;
}
#sale {
background-color: green;
}
#view {
background-color: blue;
}
.show {
opacity: 1;
transition: opacity .2s ease-in-out .2s;
}
.hide {
opacity: 0;
transition: opacity .2s ease-in-out;
}
button[aria-expanded=true] {
background-color: #cceeff;
}
<ul>
<li>
<button aria-haspopup="true" aria-expanded="true" aria-controls="feature">Featured</button>
</li>
<li>
<button aria-haspopup="true" aria-expanded="false" aria-controls="sale">On Sale</button>
</li>
<li>
<button aria-haspopup="true" aria-expanded="false" aria-controls="view">Most Viewed</button>
</li>
</ul>
<article class="show" id="feature" aria-hidden="false">
<h1>Featured</h1>
</article>
<article class="hide" id="sale" aria-hidden="true">
<h1>On Sale</h1>
</article>
<article class="hide" id="view" aria-hidden="true">
<h1>Most Viewed</h1>
</article>

HTML Select item show div and post problem

I am confused. I want two products to be selected. These products will be open by clicking the button. The selection will be made on the screen that opens. And the selected product will replace the button clicked.
I can show the products by clicking the button. I even got the result I wanted as text with jquery. But I used <select> <option> for this. There will be no drop-down list and only one will be selected. The selected image will replace the clicked area. I couldn't :(
$(document).ready(function() {
$(".showbutton, .showbutton img").click(function(event) {
var buttonName = $(this).closest('div').attr('id');
var buttonNo = buttonName.slice(4);
var boxName = "#box" + buttonNo;
$(boxName).fadeIn(300);
});
$(".closebtn").click(function() {
$(".box").fadeOut(200);
});
$(".box").click(function() {
$(".box").fadeOut(200);
});
$(".innerbox").click(function() {
event.preventDefault();
event.stopPropagation();
});
});
div.showbutton {}
div.showbutton:hover {}
.box {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.innerbox {
overflow: scroll;
width: 80%;
height: 80%;
margin: 5% auto;
background-color: white;
border: 3px solid gray;
padding: 10px;
box-shadow: -10px -10px 25px #ccc;
}
#box1 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
#box2 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
.closebutton {
width: 20%;
float: right;
cursor: pointer;
}
.closebtn {
text-align: right;
font-size: 20px;
font-weight: bold;
}
.clear {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
<div class="showbutton" id="link1">
click for first items
</div>
<div id="box1" class="box">
<div class="innerbox">
<div class="closebutton">
<div class="closebtn">X</div>
</div>
- item1.png - item2.png - item3.png
</div>
</div>
<div class="showbutton" id="link1">
click for second items
</div>
<div id="box1" class="box">
<div class="innerbox">
<div class="closebutton">
<div class="closebtn">X</div>
</div>
- item1.png - item2.png - item3.png
</div>
</div>
JSFIDDLE example of my codes: https://jsfiddle.net/j5fqhat6/

You can add data attribute to your kutu div this will help us to identify from where click event has been occurred .So, whenever your gosterButonu is been clicked you can use this data-id to add selected images text to your gosterButonu div.
Demo Code :
$(document).ready(function() {
$(".gosterButonu, .gosterButonu img").click(function(event) {
var butonAdi = $(this).attr('id');
console.log(butonAdi)
//if on click of button you want to remove active class
// $("div[data-id="+butonAdi+"]").find("li").removeClass("active")
$("div[data-id=" + butonAdi + "]").fadeIn(300);
});
$(".kapatButonu").click(function() {
var data_id = $(this).closest(".kutu").data("id");
$("#" + data_id).text($(this).closest(".icKutu").find("li.active").text())
$(".kutu").fadeOut(200);
});
$(".kutu").click(function() {
$(".kutu").fadeOut(200);
});
$(".icKutu").click(function() {
event.preventDefault();
event.stopPropagation();
});
//on click of li
$(".images li").click(function() {
//remove active class from other lis
$(this).closest(".images").find("li").not(this).removeClass("active")
//add active class to li which is clicked
$(this).addClass("active");
})
});
div.gosterButonu {}
div.gosterButonu:hover {}
.kutu {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.icKutu {
overflow: scroll;
width: 80%;
height: 80%;
margin: 5% auto;
background-color: white;
border: 3px solid gray;
padding: 10px;
box-shadow: -10px -10px 25px #ccc;
}
#kutu1 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
#kutu2 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
.kapatButonuCerceve {
width: 20%;
float: right;
cursor: pointer;
}
.kapatButonu {
text-align: right;
font-size: 20px;
font-weight: bold;
}
.clear {
clear: both;
}
ul li {
list-style-type: none
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
<div class="gosterButonu" id="link1">
clickfor first items
</div>
<!--added data-id which matched with the div above-->
<div id="kutu1" data-id="link1" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<div class="clear"></div>
<!--added ul li-->
<ul class="images">
<li>- item1.png</li>
<li> - item2.png </li>
<li>- item3.png</li>
</ul>
</div>
</div>
<div class="gosterButonu" id="link2">
click for second items
</div>
<!--added data-id which matched with the div above-->
<div id="kutu2" data-id="link2" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<div class="clear"></div>
<ul class="images">
<li>- item1.png</li>
<li> - item2.png </li>
<li>- item3.png</li>
</ul>
</div>
</div>

Add image below a certain class of element using css

What I want to do:
I want to add a "walkingMan" image under an element when its class is changed to activeCell. I know how to do it when the image is added to the front or back of the element using pseudo class, but as far as I know, there isn't something like :below that I can use to achieve the same effect. Is there a way in css I can use to micmic this?
What I have done:
I have added image below every upper cell and make it visible when the class is changed to activeCell. But I hope to find a more simple solution.
What it looks like:
Code: Simplified Code Example

You can use a single pseudo element on the .cell element and place a background image on it when it's active.
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
cells.forEach(cell => {
cell.classList.remove('activeCell')
});
cells[activeIndex].classList.add('activeCell');
activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
.cell {
display: inline-block;
border: 1px solid black;
margin-bottom: 1.2em;
}
.activeCell {
background-color: lightgrey;
position: relative;
}
.activeCell::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 1.3em;
left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
background-size:cover; /* Scale the stickman to completely cover the background area. */
}
<div>
<div class='top'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

What about this: https://jsfiddle.net/147prwy5/3/
HTML
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
CSS
.cell {
display: inline-block;
}
.cell a {
border: 1px solid black;
}
.cell.active a {
background-color: lightgrey;
}
.cell img {
width: 20px;
height: 20px;
display: none;
}
.cell.active img {
margin-top: 5px;
width: 20px;
height: 20px;
display: block;
}

I've never been a fan of the ::before and ::after pseudo classes mainly because I've personally noticed some oddities when trying to position things in Chrome vs IE (damn it IE!). Since most people here are going to give a solution using these pseudo classes (because that's somewhat what you asked) I thought I'd give a different solution using flexbox and more divs.
Not the most optimal for download size but I do like that it's not absolute positioning elements and if the squares get bigger or smaller it's pretty easy to handle that as a scss variable at the top of the file. This all uses only two values, your padding between boxes and the size of the boxes so it should be easy to update and maintain.
Anyway, have fun! Awesome question by the way :-)
.blocks {
display: flex;
}
.block {
flex: 0 0 20px;
margin: 0px 5px;
display: flex;
flex-direction:column;
}
.block > .square {
flex: 0 0 20px;
margin: 5px 0px;
background: grey;
}
.block > .space {
flex: 0 0 20px;
margin: 5px 0px;
}
.block.activeCell > .space {
background: green;
}
<div class="blocks">
<div class="block activeCell"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
</div>

Using jQuery you can toggle the class upon clicking with this:
$('.cell').click(function() { //catch clicks on .cell
$('.cell').removeClass('activeCell'); //remove class "activeCell" from all
$(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});
Apply position: relative; to .top and .bottom:
.top,
.bottom {
position: relative;
}
And use the psuedoclass :before to create a image under the .activeCell
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
And remove this:
.walkingMan {
width: 20px;
height: 20px;
display: inline-block
}
And this:
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>
And to add space between the divs .top and .bottom put a <br> between them.
$('.cell').click(function() {
$('.cell').removeClass('activeCell');
$(this).addClass('activeCell');
});
.cell {
display: inline-block;
border: 1px solid black;
cursor: pointer;
}
.top,
.bottom {
position: relative;
}
.activeCell {
background-color: lightgrey;
}
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class='top'>
<a class='cell activeCell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<br>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

add .RunManActive Class for Active element
//clicking add active Class
$(".RunMan").click(function() {
$(".RunMan").removeClass('RunManActive');
$(this).toggleClass('RunManActive');
});
//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){
$elm.removeClass('RunManActive');
$elm.eq(i).toggleClass('RunManActive');
i=$elm.length<=i?0:i+1;
}, 1000);
.RunMan{
width:35px;
height:35px;
background-color:lightgray;
border:3px solid #fff;
float:left;
position: relative;
}
.RunManActive{
background-color:#eee;
border:3px solid lightgray;
}
.RunManActive > div{
width:35px;
height:35px;
position: absolute;
background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
background-size:cover;
top:100%;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>

You can do something like this, using CSS only. With :target selector you can apply a style to the element you need to hide / show.
.container {
display: inline-block;
width: 100px;
height: 200px;
}
.link {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
.walking-man {
display: none;
width: 100px;
height: 100px;
background: red;
}
#p1:target {
display: block;
}
#p2:target {
display: block;
}
#p3:target {
display: block;
}
#p4:target {
display: block;
}
height: 90px;
float: left;
}
.walking-man img {
width: 100%;
}
.walkin-man:target {
display: block;
}
<div class="container">
<div id="p1" class="walking-man"></div>
</div>
<div class="container">
<div id="p2" class="walking-man"></div>
</div>
<div class="container">
<div id="p3" class="walking-man"></div>
</div>
<div class="container">
<div id="p4" class="walking-man"></div>
</div>

How can I reverse this simple jQuery fadeIn effect?

So, this script creates an easing swift effect when you click on the button (id="enter") and what I want is that when you click it once again it will reverse the effect and go back to the beginning. Also, another solution can be with 2 buttons so one can do the first part and the other can reverse the action.
Here is the code:
jQuery('#enter').click(function() {
$('#slide2').fadeIn(1000, 'linear', function(){
$('#slide3').fadeIn(1000, 'linear');
});
});
There are three images: slide1, slide2 and slide3. I actually found this code here: http://jsfiddle.net/e6hUr/1/ and this is how it should look but I only need reverse now.

Here you have more than one slide so fadeToggle can not give you exact reverse
Fine below code that can give you exact reverse of fadeIn effect
var forward = true;
$('#enter').click(function() {
if(forward == true){
$('#slide2').fadeIn(1000, 'linear', function(){
$('#slide3').fadeIn(1000, 'linear');
});
forward = false;
}else{
$('#slide3').fadeOut(1000, 'linear', function(){
$('#slide2').fadeOut(1000, 'linear');
});
forward = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
<li id="slide1" style="width: 100%; float: left; margin-right: -100%; display: list-item; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/drawing.jpg">
</li>
<li id="slide2" style="width: 100%; float: left; margin-right: -100%; display: none; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-day-time.jpg">
</li>
<li id="slide3" style="width: 100%; float: left; margin-right: -100%; display: none; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-night-time.jpg">
</li>
</ul>
<button id="enter" type="button">Click Me!</button>

There is two way you can do that with fadIn,fadeOut and fadeToogle for reverse effect change slide order in jquery see below code. For identify fade effect we are manage data-fade attribute in button.
$('#enter').click(function() {
var fade_type = $(this).data('fade');
if (fade_type == "in") {
$('#slide2').fadeToggle(1000, 'linear', function() {
$('#slide3').fadeToggle(1000, 'linear');
});
$(this).data('fade', 'out');
} else {
$('#slide3').fadeToggle(1000, 'linear', function() {
$('#slide2').fadeToggle(1000, 'linear');
});
$(this).data('fade', 'in');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
<li id="slide1" style="width: 100%; float: left; margin-right: -100%; display: list-item; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/drawing.jpg">
</li>
<li id="slide2" style="width: 100%; float: left; margin-right: -100%; display: none; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-day-time.jpg">
</li>
<li id="slide3" style="width: 100%; float: left; margin-right: -100%; display: none; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-night-time.jpg">
</li>
</ul>
<button id="enter" type="button" data-fade="in">Click Me!</button>

You should handle it using CSS transition and in jQuery, you just toggle a class:
-jsFiddle-
$('#enter').click(function() {
$('#slide2, #slide3').toggleClass('fadeIn');
});
#enter {
position: relative;
z-index: 9;
}
#slide2, #slide3 {
opacity: 0;
transition: opacity 1s linear;
}
#slide2.fadeIn, #slide3.fadeIn {
opacity: 1;
}
#slide2:not(.fadeIn), #slide3.fadeIn
{
transition-delay: 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
<li id="slide1" style="width: 100%; float: left; margin-right: -100%; display: list-item; ">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/drawing.jpg">
</li>
<li id="slide2" style="width: 100%; float: left; margin-right: -100%;">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-day-time.jpg">
</li>
<li id="slide3" style="width: 100%; float: left; margin-right: -100%;">
<img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-night-time.jpg">
</li>
</ul>
<button id="enter" type="button">Click Me!</button>

Use this:
$('#enter').click(function() {
$('#slide2').fadeToggle(1000, 'linear', function(){
$('#slide3').fadeToggle(1000, 'linear');
});
});
Just Toggle your fade effect.

On click slideToggle multiple hidden div

What I have :
Html
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div class="content1" style="display:none"></div>
<div class="content2" style="display:none"></div>
<div class="content3" style="display:none"></div>
Js
$(document).ready(function() {
$('#content1').click(function() {
$(' .content2, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content1').slideToggle("slow")
}
});
});
$('#content2').click(function() {
$(' .content1, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content2').slideToggle("slow")
}
});
});
$('#content3').click(function() {
$(' .content1, .content2 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content3').slideToggle("slow")
}
});
});
});
What I want
On clicking on a div show its hidden div(content) with slideToggle
if a hidden content of another div is already open then close it with slideUp and open the one you clicked (open only after the slideUp animation is completed)
I managed to get the desired effect with two hidden divs Sample
1but with three i have this Sample 2 auto toggle problem
Help! And if there's a better and simpler alternative to get this effect please suggest. P.S. Sorry for my broken English.

Your code could be refactorized using common classes and then using following logic with promise().done() callback, which will be called only once for all set:
$(document).ready(function() {
$('.for_content').click(function() {
var i = $(this).index('.for_content');
$('.content:not(:eq(' + i + '))').slideUp({
style: "height",
speed: "slow"
}).promise().done(function() {
$('.content').eq(i).slideToggle("slow")
});
});
});
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222;
}
li {
float: left;
}
.link {
display: inline-block;
color: white;
text-align: center;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
cursor: pointer;
}
.link:hover {
text-shadow: 0px 1px 10px #fff;
}
.content1 {
height: 400px;
width: 100%;
top: 0;
background-color: #333;
}
.content2 {
height: 400px;
width: 100%;
top: 0;
background-color: #444;
}
.content3 {
height: 400px;
width: 100%;
top: 0;
background-color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<ul>
<li>
<span class="link">Home</span>
</li>
<li>
<div class="link for_content" id="content1">Link 1</div>
</li>
<li>
<div class="link for_content" id="content2">Link 2</div>
</li>
<li>
<div class="link for_content" id="content3">Link 3</div>
</li>
</ul>
</div>
<div>
<div class="content content1" style="display: none">
<h1>
CONTENT 1
</h1>
</div>
<div class="content content2" style="display: none">
<h1>
CONTENT 2
</h1>
</div>
<div class="content content3" style="display: none">
<h1>
CONTENT 3
</h1>
</div>
</div>

You can use something like this:
$('div[id^=content]').click(function () {
var name = $(this).attr('id');
$('div[class^=content]:visible').slideUp('slow', function() {
$('.' + name).slideDown('slow');
});
});
I hope it helps. :-).