I have this HTML
<div id="text-slide"><ul class="menu">
<li>Webdesign
</li><div class="toggle1" style="display:none;width:45%; position:absolute;left: 16%; top:0;"><h2>Webdesign</h2><p>Test</p></div>
<li>
Design de identidades
</li><div class="toggle2" style="display:none;width:45%;position:absolute;left: 16%; top:0;"><h2>Design de identidades</h2><p>Test</p></div></ul></div>
And I created this jquery for two elements separated
$(function() {
$('#toggle1').click(function() {
$(".toggle1").toggle("slow");
$(".toggle2").hide("slow");
$(this).addClass('current');
$("#toggle2").removeClass('current');
return false;
});
$('#toggle2').click(function() {
$(".toggle2").toggle("slow");
$(".toggle1").hide("slow");
$(this).addClass('current');
$("#toggle1").removeClass('current');
return false;
});
});
Someone knows how to add many elements and simplify the jquery script?
I tried to add the third element with the same jquery but dont works for me.
Something like this?
HTML
<div class="toggle">toggle</div>
<div class="content">content</div>
<div class="toggle">toggle</div>
<div class="content">content</div>
<div class="toggle">toggle</div>
<div class="content">content</div>
<div class="toggle">toggle</div>
<div class="content">content</div>
CSS
.content {display:none;}
JS
$('.toggle').click(function(){
if($(this).next('.content').is(':hidden')) {
$('.content').slideUp();
$(this).next('.content').slideDown();
}
});
Updated fiddle
you should use the selector not() for this task it works great for me.
$('.content').not($this).slideUp('slow');
UPDATED FIDDLE HERE
Related
I am trying to show a dropdown when the gear-img div is clicked using jQuery but since it's wrapped inside an a tag, it ends up redirecting me to the url and I also want the whole div clickable. Please suggest a fix or a better way to achieve this.
<a href="http://www.google.com">
<div class="content">
<div class="gear-img"><img src="images/ic-settings-black-24-px.svg"></div>
<div class="dropdown"></div>
</div>
</a>
You could stop propagating the event onto the parent a tag :
$(".gear-img").click( function(event){
//you toggling code here....
event.preventDefault();
event.stopPropagation();
});
Add you clickable behaviour differently for every different-behaving div.
An element that is inline elements should not contain block elements.
Change code like this:
$(document).ready(function(){
$('.gear-img').click(function(){
$('.dropdown').toggle();
})
})
.dropdown {
display: none;
}
img {
width: 50px;
cursor: pointer;
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
redirect to google
<div class="content">
<div class="gear-img"><img title="Show dropdown" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg"></div>
<div class="dropdown">Dropdown</div>
Because just adding an anchor (a link) doesnt make it work as you intend. It now does exactly what you told it to do; When you click it, it goes to Google.
You can drop the anchor add a little jQuery:
<div class="content">
<div class="gear-img"><img src="images/ic-settings-black-24-px.svg"></div>
<div class="dropdown"> A<br/> B<br/> B<br/> </div>
</div>
and then you can use a little code to toggle the list:
$('.content').on('click', '.gear-img', function(){
$(this).find('.dropdown').slideToggle();
})
try this one:
$(function(){
$('.gear-img img').on('click',function(e){
e.stopPropagation()
$('.dropdown ul li').toggle('show');
console.log('Image Clicked!');
});
$('a').on('click',function(e){
e.stopPropagation()
$('.gear-img img').click()
return false;
});
});
.show{
display:block;
}
.dropdown ul li{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://www.google.com">
Click Here!
<div class="content">
<div class="gear-img"><img src="https://indianflag.co.in/wp-content/uploads/2016/12/2.j"></div>
<div class="dropdown">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</a>
You can just do this.
Initially, keep your dropdown div display none.
On click of that image div, we can show the dropdown div.Please find the code and let me know if you need further help.
<a href="http://www.google.com">
</a>
<div class="content">
<div class="gear-img" onclick="fun()"><img src="images/ic-settings-black-24-px.svg">
</div>
<div id="dropdown" class="dropdown" style="display:none">
</div>
</div>
<script>
function fun()
{
var x=document.getElementById("dropdown");
x.style.display="block";
}
</script>
I thought this would be kinda straightforward but i cant wrap my head around this. I got to following html:
<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>
I need to grab/detach the div's .test and put/append them into the .item div's. So the first div .test needs to go in the first div .item, the second div .test to the second div .item etc. So it becomes:
<div id="foo">
<div class="item">1<div class="test">test1</div></div>
<div class="item">2<div class="test">test2</div></div>
<div class="item">3<div class="test">test3</div></div>
<div class="item">4<div class="test">test4</div></div>
</div>
Now i found some jquery code and i came to this:
var child = $('#bar').find("div").eq(0);
var parent = $('#foo').eq(0);
child.detach();
parent.append( child );
This works but as suspected, it detaches/appends the first div. Now i need to detach/append them all one by one and from reading a lot of topics, i think i need to put a loop/each in there somewhere but i have no idea how and im not getting any closer after screwing around for hours.
Anyone who can put me in the right direction with this?
You can move all of them easily by just using the append() method and selecting all the divs:
$('#bar').append( $('#foo div') )
/* This is just for showing that the elements actually moved. */
#foo { background:red; }
#bar { background:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>
<div>
Alternatively, if you want to do something with each element, you can use .each():
$('#foo div').each(function(i, elem) {
var $elem = $(elem);
//Do stuff
$('#bar').append($elem);
});
/* This is just for showing that the elements actually moved. */
#foo { background:red; }
#bar { background:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>
<div>
On solution is to get both collections and iterate over one of the collections. Also note that you don't need to use .detach. .append will already do that.
var $fooItems = $("#foo .item");
var $barTests = $("#bar .test");
$fooItems.each(function(index, el) {
$(this).append($barTests.eq(index));
});
Example Fiddle
I think there are two solutions for your issue : .childern() function or usiing jQuery selectors
For example using selector :
$("#bar > div")
or using children() function :
$("#bar").children("div");
also look at this post, you may have your answer here : jQuery - get all divs inside a div with class ".container"
I would like to move several divs up the DOM with jQuery.
<section>
<div class="title"></div>
<div class="temps"></div>
<div class="list"></div>
</section>
I would like to move all the .list divs after the .title div. How can I do this with jQuery.
This $('.temps').insertAfter('.title'); does not work, it places all the .list after the first .title
I would like to move all the .list divs after the .title div.
You can use each method like this:
$('.list').each(function(){
$(this).insertAfter(
$(this) //.list div
.closest('section') //find parent div section
.find('.title') //find child div
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="title">title</div>
<div class="temps">temps</div>
<div class="list">list</div>
</section>
<section>
<div class="title">title</div>
<div class="temps">temps</div>
<div class="list">list</div>
</section>
<section>
<div class="title">title</div>
<div class="temps">temps</div>
<div class="list">list</div>
</section>
simply try this, demo
$('.list').insertAfter($('.title'));
or
$('.list').insertAfter('.title'); //only selector no object
Try this
$('.list').each(function(){
$(this).prevAll('.title').after($(this));
});
I wouldn't of been anble to get this working without #Bhojendra Nepal help in his answer above, and while his solution worked in his code snippit it did not work on my application. In the end the below worked for me.
jQuery('.list').each(function(){
jQuery(this).insertAfter(jQuery(this).parent().find('.title'));
});
Right, when I hover over the class .col-lg-6 I want the div with class of .navText to hide.
HTML:
<div class="row">
<div class="col-lg-6">
<a class="homeNav col-lg-12" href="index.html">
<div class="glyphicon glyphicon-home pull-left"></div>
<div class="navText">Home</div>
</a>
</div>
<div class="col-lg-6">
<a class="aboutNav col-lg-12" href="about.html">
<div class="glyphicon glyphicon-home pull-left"></div>
<div class="navText">About Me</div>
</a>
</div>
</div>
JQUERY:
$('.col-lg-6').hover(function () {
$(this).children('.navText').hide();
});
This isn't working.
However if I just put:
$('.navText').hide();
It does work so why isn't my hover function working correctly. I'm a little confused as I'm 100% sure I have written to jquery correct. Could bootstrap be effecting this?
Also if I use the jquery code.
$('.col-lg-6').hover(function () {
$('.navText').hide();
});
It will hide all the .navText classes.
So its having a problem with $(this) I think
.navText is not a child of .col-lg-6. It is a child of it's child. So your jQuery function would not work. Why not use css here?
.col-lg-6:hover .navText {
display: none;
}
As KJ has pointed out .navText is not a child, css is the best approach however you can also use .find() which will traverse all lower elements.
$(this).find('.navText').hide();
.navText is not a direct child of .col-lg-6. Use find instead:
$('.col-lg-6').hover(function () {
$(this).find('.navText').hide();
});
I have a few divs set up like so:
<div class="menu_options">
<div class="parent_div">input field</div>
<div class="children_div">
<div class='something">field</div>
<div class="something_else">field</div>
</div>
</div>
<div class="menu_options">
<div class="parent_div">input field</div>
<div class="children_div">
<div class='something">field</div>
<div class="something_else">field</div>
</div>
</div>
<div class="menu_options">
<div class="parent_div">input field</div>
<div class="children_div">
<div class='something">field</div>
<div class="something_else">field</div>
</div>
</div>
in jquery i am doing
$('.parent_options').each(function() {
$(this).click(function() {
});
});
right now $(this) is giving me the parent_div that i clicked on and I need to be able to move down to the children_div and hide the entire children_div. Any ideas. I know in prototype i used a down function but not sure if jquery has it.
If you want to hide .children_div after clicking on .parent_div use
$('.parent_div').click(function() {
$(this).siblings(".children_div").hide();
});
Demo here
$('.parent_div').each(function() {
$(this).click(function() {
$(this).next().hide();
});
});
If you're binding the function to all .menu-options, there's no need for each(). This should work if I understood your query properly:
$('.parent_div').click(function() {
$(this).siblings('.children_div').hide();
});
try .next()
$( this ).next( ".tb-contents'" ).show();
This will work.
Thanks