We Keep Coding

Track display of div and change display of another div accordingly

I want to change the display of a div when display of another div inside tab layout changes.
div with id noshow should be hidden when tabs(id: tab-flyouts ) are open and vice-versa.
I have tried checking visibility of tab-flyouts and change the visibility of 'noshow' div accordingly but did not work.
<div class="tab-menu">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div class="tab-flyouts" id="tab-flyouts" style="display:none">
<div class="vc_row wpb_row vc_row-fluid">
<div id="t1" style="display:none">
Tab 1 content
</div>
<div id="t2" style="display:none">
Tab 2 content
</div>
<div id="t3" style="display:none">
Tab 3 content
</div>
</div>
</div>
<div id="noshow">
This needs to be hidden when tabs are open
</div>
and here is jquery for tabs.
$(document).ready(function() {
$('.tab-menu li > a').on('click', function (e) {
e.preventDefault();
var $this = $(this);
var $tabName = $(this).attr('href');
var $tabFlyout = $('.tab-flyouts');
$(this).toggleClass('active').closest('li').siblings().children('a').removeClass('active');
if ($tabFlyout.is(':visible')){
if ($this.hasClass('active')) {
$('body').addClass('active-tab-menu');
var $activeTab = $tabFlyout.find('div' + $tabName);
$activeTab.siblings(':visible').fadeOut();
$activeTab.fadeIn();
var $h2s = $activeTab.find('.filters').siblings('h2');
$h2s.each(function () {
var $this = $(this);
var $listOfLinks = $this.next('.list-of-links');
if ($listOfLinks.is(':visible')) {
if (!$listOfLinks.children('li:visible').length) {
$this.hide();
} else {
$this.show();
}
}
});
if (!$activeTab.find('h2:visible').length && !$activeTab.find('.no-results')) {
$activeTab.find('.no-search-results').show();
}
} else{
$('body').removeClass('active-tab-menu');
$tabFlyout.slideUp(function () {
$tabFlyout.children('.wrapper > div').hide();
});
}
} else {
$('body').addClass('active-tab-menu');
var $activeTab = $tabFlyout.find('div' + $tabName);
$activeTab.show().siblings().hide().end().end().slideDown('fast', function () {
$('body').trigger('tab_flyout.open');
});
}
});
});
https://codepen.io/anon/pen/ooXdLd

If you want to hide the noshow DIV when all tabs are open, this is not possible based on your code because you are always showing one tab at time, and other tabs are hidden.
But, if you want to hide the noshow DIV when only one tab is open:
Add a $('noshow').show() when tabs are hidden.
And, add a $('noshow').hide() when any tab is shown.
Or, Add $('noshow').toggle() to switch between them.

How to stop URL with hash from jumping to anchor?

I've tried almost everyone's answer to similar problems and the answers haven't help me. So i'll post my codes and then explain a little more details of what is my problem.
Link to see codes in and editor.
http://jsbin.com/nudavoseso/edit?html,js,output
Code inside .html body.
<div class="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content1" class="content">
<h1>One</h1>
<p>Content goes here</p>
</div>
<div id="content2" class="content">
<h1>Two</h1>
<p>Content goes here</p>
</div>
<div id="content3" class="content">
<h1>Three</h1>
<p>Content goes here</p>
</div>
and code inside .js file.
function tabs() {
$(".content").hide();
if (location.hash !== "") {
$(location.hash).fadeIn();
$('.tabs ul li:has(a[href="' + location.hash + '"])').addClass("active");
} else {
$(".tabs ul li").first().addClass("active");
$('.tabs').next().css("display", "block");
}
}
tabs();
$(".tabs ul li").click(function() {
$(".tabs ul li").removeAttr("class");
$(this).addClass("active");
$(".content").hide();
var activeTab = $(this).find("a").attr("href");
location.hash = activeTab;
$(activeTab).fadeIn();
return false;
});
Everything works great if you go check out the example url below.
http://output.jsbin.com/nudavoseso
The problem
If you go to the same url above with the hashtag #content1 at the end it jumps to anchor(#content1), I do not want the page to be jumping to anchor. I want the page to always start at the top. This only happens when it's a direct link to the url.
http://output.jsbin.com/nudavoseso#content1

If you're willing to take a slight hit to your user's experience, you can detect when a hash exists and simply reload the page without the hash:
if (location.hash) {
window.location = location.href.replace(location.hash, '');
}

THE FIX
html
<div class="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div class="content content1">
<p>1. Content goes here</p>
</div>
<div class="content content2">
<p>2. Content goes here</p>
</div>
<div class="content content3">
<p>3. Content goes here</p>
</div>
js
function tabs(){
$(".content").hide();
if (location.hash !== "") {
$('.tabs ul li:has(a[href="' + location.hash + '"])').addClass("active");
var hash = window.location.hash.substr(1);
var contentClass = "." + hash;
$(contentClass).fadeIn();
} else {
$(".tabs ul li").first().addClass("active");
$('.tabs').next().css("display", "block");
}
}
tabs();
$(".tabs ul li").click(function(e) {
$(".tabs ul li").removeAttr("class");
$(this).addClass("active");
$(".content").hide();
var contentClass = "." + $(this).find("a").attr("href").substr(1);
$(contentClass).fadeIn();
window.location.hash = $(this).find("a").attr("href");
e.preventDefault();
return false;
});
URL without any hash.
http://output.jsbin.com/tojeja
URL with hashtag that does not jumping to anchor.
http://output.jsbin.com/tojeja#content1

Make a clickable link

<script>
$(document).ready(function () {
var li = $('.someDiv li');
li.toggle(function () {
li.children("div").hide();
$(this).children("div").fadeIn(700);
}, function () {
$(this).children("div").fadeOut(300);
});
});
</script>
<div class="someDiv">
<ul>
<li>Title <div style="display:none;">Description Something</div></li>
<li>Title <div style="display:none;">Description Something</div></li>
<li>Title <div style="display:none;">Description Something</div></li>
</ul>
</div>
There are links inside divs, but when a div is visible the links are not clickable, because the clicking just toggles the div.
How make the links work?

I would not use toggle, check the event to see if it is an anchor, if it is ignore the click.
$(function () {
$('.someDiv').on("click","li", function(e){
var li = $(this);
if ( $(e.target).is("a") ) return;
li.toggleClass("open");
var divs = li.children("div").stop();
if(li.hasClass("open")) {
divs.fadeIn(700);
} else {
divs.fadeOut(300);
}
});
});

Add new div in a nested HTML structure

I have this html structure and code:
<ul class="navMore">
<li>Link 1</li>
<li href="#"><a>Link 2</a><?li>
</ul>
<div class="row-fluid"></div>
$(".navMore li a").each(function() {
$(this).on("click", function() {
$('<div class="row-fluid"></div>').insertAfter($(this).closest('.row-fluid'));
$('<div id="content" class="span4"></div>').insertAfter($(this).next('.row-fluid'));
});
});
I need to add a new .row-fluid div just after the previous .row-fluid
Expected result:
<ul class="navMore">
<li>Link 1</li>
<li href="#"><a>Link 2</a><?li>
</ul>
<div class="row-fluid"></div>
<div class="row-fluid"></div>
But if we already added a new .row-fluid div, then the #content div should be put inside this newly added row-fluid div
How do I achieve this?
<ul class="navMore">
<li>Link 1</li>
<li href="#"><a>Link 2</a><?li>
</ul>
<div class="row-fluid"></div>
<div class="row-fluid">
<div id="content" class="span4"></div>
</div>
Finally, how can I do that if we have inserted 3 #content div, start again with a new .row-fluid div and all again?

Here you go.
<script type="text/javascript" >
$(document).ready(function () {
$(".navMore li a").click(function() {
var countOfDiv = $(".row-fluid").length;
if(countOfDiv < 2)
$('<div class="row-fluid"></div>').insertAfter(".row-fluid");
else
$(".row-fluid:last").html("<div id=\"content\" class=\"span4\"></div>");
});
});
</script>
Link 1
Link 2

function insertRow() {
$newdiv = $("<div class='row-fluid'/>");
$newdiv.insertAfter(".row-fluid:last");
return $newdiv;
}
// assume you're passing a content object into the routine
function insertContent( contentObj) {
$lastRow = $(".row-fluid:last");
if( $lastRow.children().length >= 3) {
insertRow().append( contentObj);
} else {
$lastRow.append( contentObj);
}
return contentObj;
}

Eventually I went with this:
$(".navMore li a").on("click", function() {
var $el = $(this);
var $row = $el.closest('.row');
if($row.next('.new').length){
$('<div class="span"></div>').appendTo('.new');
}
else {
$('<div class="new"></div>').insertAfter($row);
$('<div class="span"></div>').appendTo('.new');
}
});

Hide selected by anchor's href

I'm trying to figure out a function that will allow me to hide divs and show them if referring link is clicked.
Hard to explain but here is what I am looking for:
<ul>
<li>Link 1</li>
<li class="active">Link 1</li>
<li>Link 1</li>
<ul>
<div id="id-1">Some content</div> // Hidden
<div id="id-2">Some content</div> // This should only show in document
<div id="id-3">Some content</div> // hidden
Whenever other anchor is being clicked other divs should hide.
I hope his make sense and thank you for your help in advance
Dom

You can use something like this (untested so may need tweaking):
$(document).ready(function() { //fires on dom ready
$("a").click(function(e) { //assign click handler to all <a> tags
$(".classForYourDivs").hide(); //hide all divs (put class on ones you want to hide)
var element = $(e.target);
var href = element.attr("href"); //get the attribute
$(href).show(); //show the relevent one
return false; //important to stop default click behavior of link
});
});
Incidentally you should consider using something other than the href to store this information... take a look at the docs for the jquery data() function

Add a class to the ul and the divs.
<ul class="myUL">
<li>Link 1</li>
<li class="active">Link 1</li>
<li>Link 1</li>
<ul>
<div id="id-1" class="myDivs">Some content</div> // Hidden
<div id="id-2" class="myDivs">Some content</div> // This should only show in document
<div id="id-3" class="myDivs">Some content</div> // hidden
then in CSS,
.myDivs { display: none; }
and Try below js code,
var $myDivs = $('.myDivs');
$('.myUL a').on('click', function () {
$myDivs.hide();
$($(this).attr('href')).show();
});
DEMO: http://jsfiddle.net/LYKVG/

$("body").on("click","a", function(){
var divtoshowselector = $(this).attr("href");
$(divtoshowselector).show().siblings().hide();
})

http://jsfiddle.net/
html
<ul>
<li>Link 1</li>
<li class="active">Link 2</li>
<li>Link 3</li>
<ul>
<div id="id-1">Some content 1</div>
<div id="id-2">Some content 2</div>
<div id="id-3">Some content 3</div>​
css
div {display: none;}
javascript/jquery
$("a").click( function(e) {
e.preventDefault();
var elId = $(this).attr('href');
$('div').hide();
$(elId).show();
});​

I've set up a fiddle for you, check out: http://jsfiddle.net/UsGag/
function currentActive()
{
return $("li.active a").attr("href");
}
$("div:not(" + currentActive() + ")").hide();
$("li a").on("click", function()
{
//hide old active div
$("div" + currentActive()).hide();
$("li").removeClass("active");
//activate new div
$(this).parent().addClass("active");
$("div" + currentActive()).show();
});
Hope this helps you, extend to your own needs. And just for completeness: Don't use the - in ids / classnames.
​

Try
$("a").click( function( ) {
var elId = $(this).attr("href");
$(elId).show().siblings("div[id^=id-]").hide();
});
Fiddle here