We Keep Coding

Make slideToggle check if div is already open, before loading ajax content into it?

Excuse me for I am a javascript beginner and I need some help with a task which is probably really banal, although I've searched for a solution here and didn't find any that I could apply to my case.
I have three buttons. When clicked, each slide-opens a div layer and loads content from an external html file into it.
The problem is that after you click one of them, when you click the next one, it first collapses the div, before loading the content. What I would want is for it to simply change the content of the div, if the div is already open. If not, then to open it first.
And I still want it to be toggle-able, in a way that if you click the same link twice, it closes.
I don't know if I am explaining this correctly so here is a pen, hopefully you will see what I mean:
https://codepen.io/tinat/pen/MvjpJW
HTML:
<a id="first" href="javascript:void;">
First
</a>
<a id="second" href="javascript:void;">
Second
</a>
<a id="third" href="javascript:void;">
Third
</a>
<div id="description">
</div>
JS:
$("#first").click(function(){
$("#description").slideToggle("slow");
$("#description").load("https://codepen.io/tinat/pen/PKGpQy.html #description1");
});
$("#second").click(function(){
$("#description").slideToggle("slow");
$("#description").load("https://codepen.io/tinat/pen/PKGpQy.html #description2");
});
$("#third").click(function(){
$("#description").slideToggle("slow");
$("#description").load("https://codepen.io/tinat/pen/PKGpQy.html #description3");
});
Thanks for any help in advance!

Try add active class to recognize current active tab, and you can check active to determine show content or slide it up.
html
<a class="listen" id="first" href="https://codepen.io/tinat/pen/PKGpQy.html #description1">
First
</a>
<a class="listen" id="second" href="https://codepen.io/tinat/pen/PKGpQy.html #description2">
Second
</a>
<a class="listen" id="third" href="https://codepen.io/tinat/pen/PKGpQy.html #description3">
Third
</a>
<div id="description">
</div>
js
$(".listen").click(function(){
if(!$(this).hasClass("active")){
$(this).addClass("active");
$("#description").slideDown("slow");
$(this).siblings(".listen").removeClass("active");
$("#description").load($(this).attr("href"));
} else {
$(this).removeClass("active");
$("#description").slideUp("slow");
}
return false;
});
https://jsfiddle.net/zt11vkz6/

Updated CodePen here.
You will have to keep track of the active tab if the same HTML element is going to be used for each "description". Here I've used the variable tabId to track this state and created a function onClick to prevent repeating code for each tab.
var tabId = null;
function onClick(id, url) {
if (tabId == id) {
// We've must have clicked again on the active
// tab so close description
$("#description").slideToggle("slow");
tabId = null;
} else {
$("#description").load(url);
if (tabId == null) {
// There is no active tab so open description
$("#description").slideToggle("slow");
}
tabId = id;
}
}
$("#first").click(function(){
onClick(1, "https://codepen.io/tinat/pen/PKGpQy.html #description1");
});
$("#second").click(function(){
onClick(2, "https://codepen.io/tinat/pen/PKGpQy.html #description2");
});
$("#third").click(function(){
onClick(3, "https://codepen.io/tinat/pen/PKGpQy.html #description3");
});

If href equals id of another div do function

I have a hidden div with the details of a thumbnail that is visible on the page. When you click on the thumbnail, it should fadein or slideup the div with details.
I have set with jquery incremented ID's to each ".portfolio-item-details" to identify each one and then have set with jquery the same ID's to the href of the thumbnail.
<section id="portfolio1" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio1" title="">
<img src="thumbnail.jpg">
</a>
<section id="portfolio2" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio2" title="">
<img src="thumbnail.jpg">
</a>
Since this is done dynamically, how can I with jquery fadeIn or slideUp the ".portfolio-item-details" if the href is equal to the ID. Basically thumbnail with "#portfolio1" should slide up the div with "#portfolio1" on click.
This is my jquery code which to add the IDs and HREF is working perfectly but not working to slideUp or fadeIn the div with the same ID.
$(document).ready(function () {
var i=0;
$(".portfolio-item-details").each(function(){
i++;
var newID="portfolio"+i;
$(this).attr("id",newID);
$(this).val(i);
});
var i=0;
$(".open-portfolio-item-details").each(function(){
i++;
var newReadMoreHREF="#portfolio"+i;
$(this).attr("href",newReadMoreHREF);
$(this).val(i);
if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
$(this).fadeIn();
}
});
});
SOLUTION
Thanks to Austin's code, I was able to modify it to work with mine.
Check here: http://jsfiddle.net/jdoimeadios23/xpsrLyLz/

You want something like this?
HTML
<div class="image" value="1">
<img src="thumbnail.jpg" />
</div>
<div id="portfolio1" class="details">details</div>
<div class="image" value="2">
<img src="thumbnail.jpg" />
</div>
<div id="portfolio2" class="details">more details</div>
JS
$(document).ready(function () {
$('.details').fadeOut(1);
$(".image").click(function () {
var num = $(this).attr("value");
$("#portfolio"+num).fadeIn(1000);
});
});
JSFiddle Demo
You don't even need to bother with ID's so long as the next div below each image is it's details.

The problem is in this block
if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
$(this).fadeIn();
}
Because you're having two errors, the first one is that newReadMoreHREF is a variable, not a string in your HTML or a value to any variable and so on.
Second thing is, that in the variable declaration you're using "#portfolio"+i;, which would be good if you were about to select an element. But using it in the jQuery iif statement with .attr('id') will again cause a havoc.
The thing that you need is something like this
$(".open-portfolio-item-details").each(function(){
i++;
var newReadMoreHREF="portfolio"+i; // removed #
$(this).attr("href",newReadMoreHREF);
$(this).val(i);
if ($(".portfolio-item-details a").attr("id") == newReadMoreHREF) {
// you need to access the hyperlink in the element, not
// the element itself. this portfolio1 ID is of a hyperlink
// again here, this is referencing the main iterator.
$(this).fadeIn();
// are you sure you want to fade the .open-portfolio-item-details?
}
});
Removed the hash sign and then called the variable value to check against. It would execute to be true if the condition is true.

Try this:
HTML:
content
<section id="portfolio2" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio2" title="">
<img src="thumbnail.jpg">
</a>
<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>
Jquery:
$('a.open-portfolio-item-details').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
$('.portfolio').hide();
$('.portfolio' + id).fadeIn();
});
Couldn't get the fiddle link for some reason.
Edit:
I don't know the name of the class that shows the content you want displayed, so as an example I'm using portfolio. Try putting this code into a fiddle

Hiding divs whenever a new one opens

I have a website with two options represented by <a> tags, chairs and tables. This is the HTML that displays the div whenever a <a> tag is clicked on.
<div id="workbench_menu">
<p><strong>Living Room</strong></p>
<a onclick="chairs()" href="#"><p>chairs</p></a>
<a onclick="tables()" href="#"><p>tables</p></a>
</div>
<div id="workbench_objects">
<div id="tables" class="refresh" style="display:none;">
<div class="workbench_object_info">
<img src="images/house/objects/table_4.png">
<p>20 oak logs</p>
</div>
</div>
<div id="chairs" class="refresh" style="display:none;">
<div class="workbench_object_info">
<img src="images/house/objects/stonechair_1.png">
<p>20 oak logs</p>
</div>
</div>
</div>
The javascript which handles that function is here:
<script>
function tables() {
document.getElementsByClassName('refresh').style.display='none';
document.getElementById('tables').style.display='inline';
}
function chairs() {
document.getElementsByClassName('refresh').style.display='none';
document.getElementById('chairs').style.display='inline';
}
</script>
So what I am trying to do, is that when one of the options are pressed, everything else is hidden and only the div that is assigned that specific <a> tag will be displayed. When a new <a> tag is clicked, the old one will be hidden and the new on will be displayed.
I have tried adding a document.getElementsByClassName('refresh').style.display='none'; in hope that every class with "refresh" attached to it, will be put on display:none but this does not work somehow. The outcome is that after a link is clicked, the div is shown. After a new link is clicked, that div is shown too without hiding the old div. Hope you have some suggetions, thanks in advance.
UPDATE:
var length = document.getElementsByClassName('refresh').length;
for(var i=0; i<length;i++){
document.getElementsByClassName('refresh')[i].style.display='none';
}
function tables() {
document.getElementById('tables').style.display='inline';
}
function chairs() {
document.getElementById('chairs').style.display='inline';
}

document.getElementsByClassName('refresh') will return you the array of elements.
function tables() {
hideElements();
document.getElementById('tables').style.display='inline';
}
function chairs() {
hideElements();
document.getElementById('chairs').style.display='inline';
}
function hideElements(){
var length = document.getElementsByClassName('refresh').length;
for(var i=0; i<length;i++){
document.getElementsByClassName('refresh')[i].style.display='none';
}
}

how can I remove the subnavigation overlap?

I am trying to create a sub navigation. Right now I have two subnav. When i hover over the first item on the main menu the corresponding submenu appears. But when I hover over the second item the second sub nav appears OVER the first one. How can I write the code so that this does not happen?
url: http://arabic001.com
$(document).ready(function() {
$('#arbNavText01').mouseover(function() {
$('#subNav01').show('slow');
});
$('#subNav01').mouseleave(function() {
$('#subNav01').hide('slow');
});
$('#arbNavText02').mouseover(function() {
$('#subNav02').show('slow');
});
$('#subNav02').mouseleave(function() {
$('#subNav02').hide('slow');
});
})
I just tried the below suggestion from Scott and I am not able to show and hide the submenu on hover. Any ideas of how to solve this problem? Here are my new codes:
html
<div id="menu01" class="menu_item">
<div id="engNavText01">Alphabet</div>
<div id="arbNavText01">الأحرف</div>
<div id="subNav01" style="display:none;">
<a href="colors" class="subNav">
<span style="font-size:26px; cursor:pointer;">قراءة</span</a>
<br>reading<br><br>
</div>
</div>
<div id="menu02" class="menu_item">
<div id="engNavText02">Numbers</div>
<div id="arbNavText02">الأحرف</div>
<div id="subNav02" style="display: none; ">
<a href="colors" class="subNav">
<span style="font-size:26px; cursor:pointer;">قراءة</span</a>
<br>reading<br><br>
</div>
</div>
and the JS
$(document).ready(function() {
$('.menu_item').children().hover(
function(){
$subNav = $(this).parents('menu_item').children("div[id^='subNav'");
if ($subNav.css('display', 'none')){
$subNav.show('slow');
}
},
function(){
$(this).parents('menu_item').children("div[id^='subNav'").hide('slow');
});
})

You've created a mouseleave event, but you've only attached it to the submenu. So in order to make a menu disappear, the user will have to hover over the submenu and then move out. You could achieve what you want by hiding other submenus before opening a new one. So keeping your mouseleave events as you have them, you could modify your 2 mouseover events to this:
$('#arbNavText01').mouseover(function() {
$('#subNav02').hide('slow');
$('#subNav01').show('slow');
});
$('#arbNavText02').mouseover(function() {
$('#subNav01').hide('slow');
$('#subNav02').show('slow');
});
Edit for comment:
I was thinking about that when I went and looked at your page originally. I think if you used a slightly different structure in your html this could be done. Right now your menu divs aren't clearly structurally related to each other so maybe add a div that can contain the 3 elements associated with each menu item.
I'm going to spit ball an idea, it may not even work let alone be the best way.
<div id="menu01" class="menu_item">
<div id="engNavText01">Alphabet</div>
<div id="arbNavText01">الأحرف</div>
<div id="subNav01" style="display: none; ">
<span style="font-size:26px; cursor:pointer;">قراءة</span
<br>reading<br><br>
</div>
</div>
<div id="menu02" class="menu_item">...
Edited JS, I think now it could work
$('.menu_item').hover(
function(){
$subNav = $(this).children("div[id^='subNav']");
if ($subNav.css('display', 'none')){
$subNav.show('slow');
}
},
function(){
$(this).children("div[id^='subNav']").hide('slow');
}
);
Was trying it out with a JSFiddle, seems alright there. Might need some modification for your uses.

Show a div when a mouseover on a link

If I mouseover on a link it has to show div.
My problem is that I have to show divs in all of the links inside a page. For each link I have to show a different div.
How to do this using javascript?

Since, your question does not specify anything. I will give a simplest solution I can. That is, with plain CSS, no JS needed.
Here is a demo
Markup
<a href="#">
Some
<div class="toshow">
Hello
</div>
</a>
<a href="#">
None
<div class="toshow">
Hi
</div>
</a>
CSS
.toshow {
display:none;
position: absolute;
background: #f00;
width: 200px;
}
a:hover div.toshow {
display:block;
}
You should not try to rely on script as much as possible. This is a very simple example, with displays the use of :hover event of the link.

Steps can be:
Make multiple divs all with different id.
Give style="display:none;" to all div.
Make links to show respective div.
In onMouseOver of link call js function which changes display property to block of proper div. Ex.:- document.getElementById("divId").style.display = "block"; And for all other div set display:none; in that js function.
Sample code:-
Your links:
Div 1
Div 1
Your divs:
<div id="myDiv1">Div 1</div>
<div id="myDiv2">Div 2</div>
JS function:
function Changing(i) {
if(i==1){
document.getElementById("myDiv1").style.display = "block";
document.getElementById("myDiv2").style.display = "none";
} else {
document.getElementById("myDiv1").style.display = "none";
document.getElementById("myDiv2").style.display = "block";
}
}
If you have more divs then you can use for loop in js function instead of if...else.

look at jquery each
<div id=div-0" class="sidediv" style="display:none" > Div for first link </div>
<div id=div-1" class="sidediv" style="display:none"> Div for second link </div>
<div id=div-2" class="sidediv" style="display:none"> Div for third link </div>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
and essentially do something like this
$('.linkclass').each(function(i,u) {
$(this).hover(function()
{
$('#div-'+i).show();
}, function() {
$('#div-'+i).hide(); //on mouseout;
})
});

Edit: oops ...this will need jquery. dont know why I assumed jquery here.
You can give ids to all the links such as
<a id="link-1"></a>
<a id="link-2"></a>
<a id="link-3"></a>
and so on ..
and similarly to div elements
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
and so on ..
then
$("a").hover(function () { //callback function to show on mouseover
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).show();
},
function () { //if you want to hide on mouse out
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).hide();
}
);