How to change content of multiple divs on click - javascript

I am attempting to figure out how to change the content of two different, non-contiguous divs, when a link is clicked. I have some draft HTML and Javascript, and I suspect missing CSS might be the key to make this work.
Here is the HTML:
<ul id="tabs">
<li>Link 1
</li>
<li>Link 2
</li>
</ul>
<div id="tabs-container">
<div id="content1">Content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2">Content for link 2. Should display only when Link 2 is clicked.</div>
</div>
<p>Unrelated text is here. Text in this area is static and should display at all times.</p>
<div id="tabs-container-2">
<div id="content1-2">Additional content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2-2">Additional content for link 2. Should display only when Link 2 is clicked.</div>
</div>
Here is the Javascript:
$(function () {
$('#tabs-container .tabs').hide().eq(0).show();
$('#tabs-container-2 .tabs').hide().eq(0).show();
$('#tabs li').click(function () {
num = $('#tabs li').index(this);
$('#tabs-container .tabs').hide().eq(num).show();
$('#tabs-container-2 .tabs').hide().eq(num).show();
});
});
I am a novice at CSS and Javascript. In fact, I deleted my attempt at CSS because it was so poor. Here is the partial jsfiddle:
http://jsfiddle.net/Fbx_Steve/GbaMx/14/
Hope someone can help. Am I even on the right track?

Try,
$(function () {
$('#tabs-container div').hide().eq(0).show();
$('#tabs-container-2 div').hide().eq(0).show();
$('#tabs li').click(function () {
$('#tabs-container div').hide()
$('#tabs-container-2 div').hide()
num = $('#tabs li').index(this);
$('#tabs-container div').hide().eq(num).show();
$('#tabs-container-2 div').hide().eq(num).show();
});
});
DEMO

Is this what you're after?
http://jsfiddle.net/GbaMx/16/
I added an id to each link, and when the link is clicked the repective content is toggled.
I grouped them into 2 classes for .c1 .c2 for content 1 and content 2

Updates JSFiddle: http://jsfiddle.net/GbaMx/18/
Your Javascript was totally fine. However, you were trying to reference the tabs class, when there were no such classes defined. Thus, I had to update the HTML with ids of content-x to have a class of tabs.

Try this
JQUERY CODE:
$(function () {
$('#tabs-container div').hide();
$('#tabs-container-2 div').hide();
$('#tabs li a').on('click', function (event) {
event.preventDefault();
num = $(this).parent().index();
$('#tabs-container div').eq(num).slideToggle();
$('#tabs-container-2 div').eq(num).slideToggle();
});
});
LIVE DEMO:
http://jsfiddle.net/dreamweiver/GbaMx/22/
There were few things missing in your code, so i have just tuned it a bit.
Happy Coding :)

Try this:
html
<ul id="tabs">
<li><a id="link1" href="#">Link 1</a>
</li>
<li><a id="link2" href="#">Link 2</a>
</li>
</ul>
<div id="tabs-container">
<div id="content1" class="contents">Content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2" class="contents">Content for link 2. Should display only when Link 2 is clicked.</div>
</div>
<p>Unrelated text is here. Text in this area is static and should display at all times.</p>
<div id="tabs-container-2">
<div id="content1-2" class="contents">Additional content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2-2" class="contents">Additional content for link 2. Should display only when Link 2 is clicked.</div>
</div>
javascript
$( document ).ready(function() {
// hide tabs
$('.contents').hide();
$('#link1').click( function() {
$('#content1,#content1-2').show();
return false;
});
$('#link2').click( function() {
$('#content2,#content2-2').show();
return false;
});
});
see demo: http://jsfiddle.net/Magicianred/BV2kS/1/
Enjoy your code

It works you're only missing a class "tabs" in the content divs:
<ul id="tabs">
<li>Link 1
</li>
<li>Link 2
</li>
</ul>
<div id="tabs-container">
<div id="content1" class="tabs">Content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2" class="tabs">Content for link 2. Should display only when Link 2 is clicked.</div>
</div>
<p>Unrelated text is here. Text in this area is static and should display at all times.</p>
<div id="tabs-container-2">
<div id="content1-2" class="tabs">Additional content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2-2" class="tabs">Additional content for link 2. Should display only when Link 2 is clicked.</div>
</div>
DEMO

Related

How to show content from the specific div with javascript/jQuery

I want to show content from the specific div when the page loads. This is my code:
$(document).ready(function () {
$('.pbox:gt(0)').hide();
$('#buttons').on('click', 'a', function () {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
$('.pbox:visible').hide(600);
$('.pbox[id=' + $(this).attr('data-id') + ']').show(600);
});
});
.current {
background-color:red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<ul id="buttons">
<li>
<a data-id="div1">One</a>
</li>
<li>
<a data-id="div2">Two</a>
</li>
<li>
<a data-id="div3">Three</a>
</li>
<li class="current">
<a data-id="div4">Four</a>
</li>
</ul>
<div class="pbox" id="div1">
Content 1
</div>
<div class="pbox" id="div2">
Content 2
</div>
<div class="pbox" id="div3">
Content 3
</div>
<div class="pbox" id="div4">
Content 4
</div>
As you can see by default am adding the current class to the element:
<li class="current">
<a data-id="div4">Four</a>
</li>
So what am trying to achieve is when the page loads show Content 4 as you can see right now it shows Content 1 when the page loads.
Can anybody try to help me with this?
If you need show content where link is active you can do it with code below
$.fn.pageLoad = function() {
const currentId = $('li.current>a').data('id');
$('.pbox:visible').hide(600);
$('.pbox[id=' + currentId + ']').show(600);
}
$('document').pageLoad();
Just make any load function which close all pboxes and find current li>a id and open it. Also you can add setTimeout if your content is loading slow.

jquery tabs with links remember last active item

I did the following code, to be able to change the class of an li tag and then change the CSS of it.
I created a cookie variable that help me to select the good li tag. but I have a gap when I click.
I have three tabs : device, links and sites.
for example if I click on devices and had click on sites before, sites will be selected.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
jQuery.cookie("select", jQuery(this).parent('li').attr('id'));
});
jQuery('#' + jQuery.cookie("select")).addClass('active').siblings().removeClass('active');
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
Since clicking the link takes you to a new page, there is no need to do this programmatically.
The page /netmg/controller/device/search should have
<li id="device" class="active">...</li>
<li id="link">...</li>
<li id="site">...</li>
The page /netmg/controller/link/search should have
<li id="device">...</li>
<li id="link" class="active">...</li>
<li id="site">...</li>
The page /netmg/controller/site/search should have
<li id="device">...</li>
<li id="link">...</li>
<li id="site" class="active">...</li>
You can put that in the HTML.
If, instead, you want to make it all one page and the href attribute indicates what content is displayed, say, in a <div id="deviceContent"></div> or similar, you could use this:
<script>
jQuery(document).ready(function() {
jQuery('.tab-links li a').click(function(e){
e.preventDefault();
var newdiv = jQuery(this).attr('href');
jQuery('.tab-links li').removeClass('active');
jQuery(this).parent('li').addClass('active');
jQuery('.contents div').hide();
jQuery(newdiv).show()
});
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device" class="active">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
<div class="contents">
<div id="deviceContent"><!-- insert some contents -->a</div>
<div id="linkContent"><!-- insert some contents --> b</div>
<div id="siteContent"><!-- insert some contents -->c</div>
</div>
For a demo, see this fiddle.

Changing the active class as well as content in nav pills

Basically I'm trying to create a "wizard" via bootstrap where the active tab changes when the "continue" button is clicked. I've managed to come up with the following code:
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="step1">
<a class="btn" href="#step2" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step2">
Step 2
<a class="btn" href="#step3" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step3">
Step 3
</div>
</div>
</div>
Right now it works fine when I click the nav pills themselves (the content changes and the active pill changes too).
However when I click the individual continue button the content changes but the active nav pill does not change.
Why doesn't the active class change like when I click the pill itself?
Here's a jsFiddle with the code:
http://jsfiddle.net/MvY4x/5/
Just found this much more elegant solution...
$('ul.nav.nav-pills li a').click(function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
from: http://info.michael-simons.eu/2012/07/30/twitter-bootstrap-make-the-default-pills-more-usable/
You could use jQuery to activate the next tab and it's content. Give all of your continue buttons a class like 'continue' and then you can do something like this..
$('.continue').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
Demo on Bootply: http://bootply.com/112163
you could add Ids to the pills (step1tab, etc) and then make a function a function like this:
function switchPill(a,b){
$("#step"+a+"tab").removeClass("active");
$("#step"+b+"tab").addClass("active");
}
and add this to the anchor tag of the text:
onClick="switchPill(2,3)"
I hacked this fiddle: http://jsfiddle.net/MvY4x/7/
$('div.tab-content a[data-toggle]').on('click', function ()
{
var that = $(this),
link = that.attr('href');
$('a[href="' + link + '"]').not(that).trigger('click');
});
Really a bad ass hack, needs improvement but may give an idea...

jquery accordion mouseover and mouseout on navigation of vertical menu

below is my code and i want when i mouse hover the Link CMT its div will open and when i mouse out its div closed. .....
<div class="wrap">
<ul class="accordion1">
<li>
<h2 id="first">CMT</h2>
<div class="content">
contents of 1st
</div>
</li>
<li>
<h2>FOIS</h2>
<div class="content">
contents of 2nd
</div>
</li>
<li>
<h2>ASP</h2>
<div class="content">
contents of 3rd
</div>
</li>
<li>
<h2>PTT</h2>
<div class="content">
contents of 4th
</div>
</li>
</ul>
</div>
Try this
$('h2').on('mouseenter', function () {
$(this).next().show();
}).on('mouseleave', function () {
$(this).next().hide();
});
DEMO
incase you want the want the content to be shown when you hover over that too you could do this
$('li').on('mouseenter', function () {
$(this).find('.content').show();
}).on('mouseleave', function () {
$(this).find('.content').hide();
});
DEMO
I've got a similar solution, but using hover() instead:
$(document).ready(function(){
$('h2').hover(function(){
$(this).next().css("display","block");
},function(){
$(this).next().css("display","none");
});
});
jsFiddle Demo
Actually, I like the .show() / .hide() methods better with this:
$(document).ready(function(){
$('h2').hover(function(){
$(this).next().show('fast');
},function(){
$(this).next().hide('fast');
});
});
jsFiddle Demo 2
Not to overdo this or anything, but came across a really interesting solution from another stackoverflow question here:
HOVERINTENT Plugin Solution
Last update though, I promise!

Show/Hide content based on anchor - Almost there

I am very close but just can't see what I am missing in the jQuery script to only display the correct block of content based upon the anchor clicked and want to display initially to a visitor the first block of content from the anchors. Any help is appreciated.
I have dynamically generated anchor links with a class of .link
The content is also dynamically generated and each anchor point (A, B, C...) has it's content contained in a ul class of .test-full-list. Any help is appreciated.
Generated content:
Anchor links:
<span class="link">A</span>
<span class="link">B</span>
Content:
<div class="test-listing-container">
<ul class="test-full-list">
<ul class="test-category-list">
<a name="A"></a>
<div class="anchor-header">- A -</div>
<li id=test-list>
Some Link 1
Some Link 1
</li>
</ul>
</ul>
</div>
Script:
jQuery(document).ready(function () {
jQuery('.test-listing-container').hide();
jQuery('.link a').click(function () {
var jQuerydiv = jQuery('.test-full-list').eq(jQuery(this).index('.link a'));
jQuerydiv.show('.test-full-list'); // show the relevant div
});
});
If you're bringing in content dynamically, your .click() will not work. This is because the element you are trying to attach the click to hasn't been generated.
You can replace this:
jQuery('.link a').click(function() {
With this:
jQuery('.test-listing-container').on('click', '.link a', function() {
If that doesn't work:
jQuery(document).on('click', '.link a', function() {
Edit: Adding a fiddle to demo the code: http://jsfiddle.net/Fm6bR/1/
Assuming you can't change the markup slightly, you may do the following
A
B
<div class="test-listing-container">
<ul class="test-full-list">
<ul class="test-category-list">
<a name="A"></a>
<div class="anchor-header">- A -</div>
<li id=test-list>
Some Link 1
Some Link 1
</li>
</ul>
</ul>
</div>
jQuery(document).ready(function(){
jQuery('ul.test-category-list').hide();
jQuery('ul.test-category-list').first().show(); //show the first one by default
jQuery(document).on('click', '.link a', function (evt) {
var $a = jQuery(evt.currentTarget),
name = $a.attr('href').substr(1),
$a2 = jQuery('.test-listing-container').find('a[name="' + name + '"]'),
$ul = $a2.parents('ul.test-category-list').first();
jQuery('ul.test-category-list').hide(); // hide all
$ul.show(); // show the relevant one
});
});
Generate the content with an id based on the anchor name or some other unique identifer of the content. set data-content on each link to the id of the contents id. then use jquery to get the content by using .data function on the link in the click function
HTML
<span class="link">A</span>
<span class="link">B</span>
<div class="test-listing-container">
<ul class="test-full-list" id="fulllistA">
<ul class="test-category-list">
<li id=test-list>
Some Link 1
Some Link 1
</li>
</ul>
</ul>
</div>
Javascript
jQuery(document).on("click",".link a",function(e){
e.preventDefault();
e.stopPropagation();
var content = jQuery("#"+jQuery(this).data("content"));
jQuery(".test-listing-container > ul").not(content).hide(); // hide the others.
content.show();
});

Categories

Resources