I have a vertical menu.When I click on the first menu i want to show the corresponding div on right side.Two div is possible through it.But cannot do others.How can I do this?
script is
$(function() {
$(".box").hide();
$("#master").click(function(){
$("#leftpanel").show();
$(".box1").show();
});
$("#country").click(function(){
$(".box").hide();
$(".box1").show();
});
$("#currency").click(function(){
$(".box").hide();
$(".box2").show();
});
$("#city").click(function(){
$(".box").hide();
$(".box3").show();
});
$("#EmissionsCountry").click(function(){
$(".box4").show();
$(".box").hide();
});
$("#EmissionsFuel").click(function(){
$(".box5").show();
$(".box").hide();
});
$("#IfcIndustrySector").click(function(){
$(".box6").show();
$(".box").hide();
});
$("#ReTechnologyType").click(function(){
$(".box7").show();
$(".box").hide();
});
$("#Unit").click(function(){
$(".box8").show();
$(".box").hide();
});
$("#Energy").click(function(){
$(".box9").show();
$(".box").hide();
});
});
Html is
<div id="container">
<div id="leftpanel">
<div id="menu1">
<div>
Country
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
Currency
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
City
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
EmissionsCountry
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
EmissionsFuel
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
IfcIndustrySector
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
ReTechnologyType
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
Unit
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
Energy
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
</div>
<div id="rightpanel">
<div class="box1 box" id="country">
country
</div>
<div class="box2 box" id="currency">
currency
</div>
<div class="box3 box" id="city">
city
</div>
<div class="box4 box" id="EmissionsCountry">
EmissionsCountry
</div>
<div class="box5 box" id="EmissionsFuel">
EmissionsFuel
</div>
<div class="box6 box" id="IfcIndustrySector">
IfcIndustrySector
</div>
<div class="box7 box" id="ReTechnologyType">
ReTechnologyType
</div>
<div class="box8 box" id="Unit">
Unit
</div>
<div class="box9 box" id="Energy">
Energy
</div>
</div>
</div>
You can see the demo from FIDDLE
I changed your code a little bit and added data-box so you know which .box you show.
FIDDLE
$(function () {
$(".box").hide();
$('.menu1').click(function () {
var boxid = $(this).data('box');
$('.box').hide();
$('.box' + boxid).show();
});
});
I think this will simplify your script a lot and make it more easier to change.
The actuall problem in you HTML is that you don't have IDs assigned to <a>. You only have IDs for the first 2 menu elements and in your script you use
.show(); // this will show the box you need
.hide(); // but then you hide all the boxes
//(even the one you need because it has the class .box)
//Instead use
.hide(); // hide all the boxes
.show(); // show the one you need
FIDDLE with your code <-- added IDs and corrected script show/hide
If youre going to do it this way(by giving divs multiple class names) you should have your .hide functions ALWAYS first in the javascript above, and your .show ALWAYS second. Whats happening is you're showing all elements with a class name of box4, but then hiding all the elements with a class name of box, which includes box4 and the other later divs, so you show it, but then make it hide RIGHT after.
Hope this helps
Related
I have a category with many products. But only one product has specific class. I need to search this class and hide price only for this product.
This code hide prices of all products:
$(document).ready(function(){
if($('.flag').length > 0)
$('.prices').hide();
});
This is a sample code of website:
<div class="products">
<div class="product">
<div class="flag">
...
</div>
<div class="prices">
...
</div>
<div class="product">
<div class="flag2">
...
</div>
<div class="prices">
...
</div>
<div class="product">
<div class="flag3">
...
</div>
<div class="prices">
...
</div>
<div class="product">
<div class="flag4">
...
</div>
<div class="prices">
...
</div>
</div>
Thanks.
If I'm not mistaken $('.flag .prices').hide() should work without any additional checks. If you would need to do anything else with this container just use
$('.flag').each((_, containerEl) => {
//...your code where containerEl is your container element reference ...
})
But it won't work if you have some kind of lazy loading. It'll be a bit trickier.
I am guessing to a certain extend, but could it be that you want to hide the price for a product that has a flagx class assigned to it? (The following sample uses x=3).
If so, the following might help:
$(document).ready(function(){
$('.flag3').next('div').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="products">
<div class="product">
<div class="flag">
flag
</div>
<div class="prices">
prices for flag
</div>
<div class="product">
<div class="flag2">
flag2 div
</div>
<div class="prices">
prices for flag2
</div>
<div class="product">
<div class="flag3">
flag3 div
</div><div class="prices">
prices for flag3
</div>
<div class="product">
<div class="flag4">
flag4
</div>
<div class="prices">
prices for flag4
</div>
</div>
for example I have this html code:
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>
I made settings class to display nothing in css, unless I click on one of 4 p elements in product class. After click the settings class appears at the bottom as it should be.
How should I make that if I click for example Name2 then settings class appears after Name2 and not at the bottom?
Use $(this) to target the element you clicked on, combined with insertAfter() to add the content to this element.
Run the code snippet below and click on any of the elements with the classname product to see how this works.
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1
<p>
</div>
<div class="product">
<p>Name2
<p>
</div>
<div class="product">
<p>Name3
<p>
</div>
<div class="product">
<p>Name4
<p>
</div>
<div class="settings">
<p>SETTINGS
<p>
</div>
You can use .insertAfter() :
$(function(){
$('.product p').click(function(){
$('.settings').insertAfter($(this).closest('.product '))
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>
You can do it like,
$(".product > p").click(function(){
var $parent = $(this).parent(".product");
$parent.siblings(".settings").insertAfter($parent);
});
by using .insertAfter()
DEMO
Thanks for trying to help! I'm having an issue with the following code when the page initially loads. The div class 'highlights', which contains the divs 'box' and 'box-2', jumps around the page when loading. I suspect is has something to do with the social media buttons running javascript above the divs but cannot figure out how to get everything to stay still. Here is a link to the site. Thank you all for helping!!
<div class="buttons">
<div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB- power-rankings/week-18.html" data-layout="button_count">
</div>
<div class="twitter-button">Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="g-plus" data-action="share" data-annotation="bubble" data- href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html"> </div>
</div>
<div class="highlights">
<div class="box">
<div class="box-header"><p>What to Watch</p></div>
<div class="box-content">
<div class="game-details">
</div>
<div class="game-overview">
<div class="away-team">
<div class="away-team-logo">
<img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
</div>
<div class="record">
<h6>Dodgers</h6>
<h6 class="lighter">(60-45)</h6>
</div>
</div>
<div class="home-team">
<div class="home-team-logo">
<img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
</div>
<div class="record">
<h6>Pirates</h6>
<h6 class="lighter">(61-43)</h6>
</div>
</div>
<div class="symbol">#</div>
</div>
</div>
<div class="date">
<h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
</div>
</div>
<div class="box2">
<div class="box2-header"><p>Biggest Movers</p></div>
<div class="rise">
<div class="rise-up"><img src=../../Images/arrowGW.gif></div>
<div class="rise-number"><p>5</p></div>
<div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>
</div>
<div class="fall">
<div class="fall-down"><img src=../../Images/arrowRW.gif></div>
<div class="fall-number"><p>5</p></div>
<div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
</div>
</div>
</div>
If you're okay with using javascript you could hide your container box with display: hidden and then in a javascript onload function you would set the display back to block.
Div:
<div id="highlightDiv" class="highlights" style="display: hidden">
...
</div>
onload:
window.onload = function() {
document.getElementById("highlightDiv").style.display = "block";
}
Hi I am trying to implement a js/jquery program in which the steps are as follow
when someone click button 1 then wrapper div first is hide and wrapper div of 2 button (second ) is shown . similarly for third and forth
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">1</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">2</button>
</div>
</div>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">3</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">4</button>
</div>
</div>
I have tried this but know it will not work
<script type="text/javascript">
$('.button').on('click', function(e){
console.log($( this));
$( this ).closest(".wrapper .second").hide();
});
</script>
you could just toggle a class:
$('.button').on('click', function() {
$(this).closest('div').add($(this).closest('.wrapper').find('.hidden')).toggleClass('hidden');
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">1</button>
</div>
<div class="second hidden">
<div class="content">content2</div>
<button class="button">2</button>
</div>
</div>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">3</button>
</div>
<div class="second hidden">
<div class="content">content2</div>
<button class="button">4</button>
</div>
</div>
JS:
$('.button').on('click', function () {
$(this).closest('div').add($(this).closest('.wrapper').find('.hidden')).toggleClass('hidden');
});
CSS:
.hidden {
display: none;
}
-jsFiddle-
I would check what the parent class is. If its first hide element and show the next, else hide element and show prev, like so:
$('.button').on('click', function(e){
if($(this).parent().attr('class')=='first'){
$(this).parent().hide();
$(this).parent().next().show();
}else{
$(this).parent().hide();
$(this).parent().prev().show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">1</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">2</button>
</div>
</div>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">3</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">4</button>
</div>
</div>
Keeping your HTML the same, replace your javascript with:
$('.button').on('click', function(e){
$( this ).closest(".wrapper").find(":hidden").show();
$( this ).closest("div").hide();
});
$('.second').hide();
See jsFiddle
By default, I have several DIVs hidden and then I fade them in when the user clicks on a certain button. That works fine but when I try to close a .holder DIV using a span within said .holder DIV, only the first one works. When I click the others, nothing happens. I get no error or any sort of visual feedback whatsoever.
The markup:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
The jQuery:
$(document).ready(function() {
$('#close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
What exactly am I doing wrong here? I'm using jQuery 1.10.2 if that makes any difference.
I'd demo the code on jsFiddle but is seems to be down atm.
You can not have the same id of two element on the page. If you want to do that give it as a class name like -
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the Jquery like -
$(document).ready(function() {
$('.close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
Hope this will help.
Here is how it should be:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the JavaScript:
$(document).ready(function() {
$('.close').click(function(e) {
$(this).parents('.holder').forEach(function(){
$(this).fadeOut(250);
});
e.preventDefault();
});
});