I'm trying to make the accordion effect on this code, like this sample:
<div class="row">
<div class="col-sm-5 col-md-3 boxcontainer">
<span class="boxheader">
1
</span>
<div class="box">
ABC
</div>
<div class="boxfooter">
DEF
</div>
</div>
<div class="col-sm-5 col-md-3 boxcontainer">
<span class="boxheader">
2
</span>
<div class="box">
ABC
</div>
<div class="boxfooter">
DEF
</div>
</div>
</div>
When I click on the boxheader, the box and boxfooter parts appear. How do I to deal this, please?
FIDDLE
The code was always given in the link you've specified.
$(function() {
$( "#accordion" ).accordion();
});
Use slideToggle() method of jquery. Try the below code.
$("body").on("click",".boxheader",function(){
$(".box").hide();
$(".boxfooter").hide();
$(this).parent().find(".box").slideToggle();
$(this).parent().find(".boxfooter").slideToggle();
});
css:
.box,.boxfooter{
display:none;
}
Check Fiddle
Related
I have many sets of div and I'm trying to copy the content of a specific span into another one and repeat the same operation for all my divs.
Here is my html code:
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 1</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 2</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 3</span>
</div>
</div>
And my jQuery code is:
$("div.item").each(function(i) {
$(this).find('span.ContentComesFromHere').clone(true, true).contents().appendTo('span.ContentGoesHere');
});
It almost works, right now what I get in my span.ContentGoesHere is: This is my content 1This is my content 2This is my content 3 - and it's the same content for all but the content needs to be specific to each div.item.
Thank you for your help.
Try The code below
$("div.item").each(function(i) {
$(this).find('span.ContentComesFromHere')
.clone(true,true).contents()
.appendTo($(this).find('span.ContentGoesHere'));
});
To See The demo in jsFiddle
Click here to see Demo In JsFiddle
Try the code bellow.
$("div.item").each(function(i) {
var content = $(this).find('span.ContentComesFromHere').html();
$(this).find('span.ContentGoesHere').html(content);
});
If you type your function like this:
$("div.item").each(function(i) {
let content = $(this).find('span.ContentComesFromHere');
let contentTarget = $(this).find('span.ContentGoesHere');
content.clone().appendTo(contentTarget);
});
Then the end result will looks like this:
This is my content 1
This is my content 1
This is my content 2
This is my content 2
This is my content 3
This is my content 3
See snippet for the working code.
$("div.item").each(function(i) {
let content = $(this).find('span.ContentComesFromHere');
let contentTarget = $(this).find('span.ContentGoesHere');
content.clone().appendTo(contentTarget);
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 1</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 2</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 3</span>
</div>
</div>
See it working
Your way
$("div.item").each(function(i) {
var targetElement = $(this).find('span.ContentGoesHere');
var sourceHtml = $(this).find('span.ContentComesFromHere').clone().contents()
sourceHtml.appendTo(targetElement);
});
Simpler way
$("div.item").each(function(i) {
var contents = $(this).find('span.ContentComesFromHere').html();
$(this).find('span.ContentGoesHere').html(contents);
});
In your case you need find the source and target both by $(this).find()
Just replace to .appendTo($(this).find('span.ContentGoesHere')); into your JS code and I hope it will be work.
i want to find closest h2 tag to hovered image following is my html code
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
<div class="ih-item square effect7"><a href="#">
<div class="img">
<img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
</div>
<div class="info">
<h3>Content </h3>
<p>Some content </p>
</div></a>
</div>
<h2>Arenas</h2>
</div>
this is what i am trying to do in jquery
$(document).ready(function () {
$('.img').hover( function(){
$(this).closest('h2').hide();
})
})
Please help me how can i do it .
closest() only looks up the ancestor tree. You need a more complex traverse since the <h2> is not an ancestor
Something like:
$('.img').hover( function(){
$(this).closest('.ih-item').siblings('h2').hide();
});
You can use the .parents() method to get the correct ancestor and find for h2 tag:
$(document).ready(function() {
$('.img').hover(function() {
$(this).parents().eq(2).find('h2').hide();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
<div class="ih-item square effect7">
<a href="#">
<div class="img" style="border:2px solid red;">
<img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
</div>
<div class="info">
<h3>Content </h3>
<p>Some content </p>
</div>
</a>
</div>
<h2>Arenas</h2>
</div>
PLease go through below code, It will help you. Amending #mathiasfc's code so once you hover on image taxt will hide and on hover out you can get it back.
$(document).ready(function() {
$('.img').hover(function() {
$(this).parents().eq(2).find('h2').hide();
},function(){
$(this).parents().eq(2).find('h2').show();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
<div class="ih-item square effect7">
<a href="#">
<div class="img" style="border:2px solid red;">
<img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
</div>
<div class="info">
<h3>Content </h3>
<p>Some content </p>
</div>
</a>
</div>
<h2>Arenas</h2>
</div>
you were missing quotes on h2 :
$(document).ready(function () {
$('.img').hover( function(){
$(this).closest('.col-md-3').find('h2').hide();
})
})
this should work
You have to think in your tree first, mainly because you are manipulating your DOM tree. My approach in this situation is go to the first-child node and find your h2 tag, after that make your treatment.
$(document).ready(function () {
$('.img').hover( function(){
$(this).parent().parent().parent().find('h2').hide();
})
})
https://jsfiddle.net/9b9s87oo/1/
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
I'm not really experienced with jQuery but I couldn't find an answer for this. What I exactly want to do is when people click on the img with the class machine-dropdown that the div overview does slideToggle. I got multiple lists on this page with the same construction so I need them to work individual.
<img class="machine-dropdown" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
<div class="clear"></div>
<div class="category-divider"></div>
<div class="row">
<div class="overview">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="machines">
<img class="actueel-img" src="" />
</a>
<a href="">
<span class="machine-overzicht-title"></span>
</a>
</div>
</div>
</div>
I tryed it with many methods that jquery already has. .closest .first .find but still when i click it slides all lists.
Thanks for the help already!
You could do it like this:
Change your HTML to this:
<img class="machine-dropdown" data-target="#overview-1" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
<div class="clear"></div>
<div class="category-divider"></div>
<div class="row">
<div class="overview" id="overview-1">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="machines">
<img class="actueel-img" src="" />
</a>
<a href="">
<span class="machine-overzicht-title"></span>
</a>
</div>
</div>
</div>
Note that I've added data-target="#overview-1" to the machine-dropdown image and id="overview-1" to the overview div.
Now use the following javascript/jquery:
$(function(){
$(".machine-dropdown").each(function(){
$(this).click(function(){
var target = $(this).data("target");
$(target).slideToggle();
});
});
});
use this attribute in your code.
$('.machine-dropdown').click(function(){
$(this).next().next().next().find('.overview').slideToggle();
});
I think it will solve your problem.
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