i have two div's:
<div class="component_wrapper">
</div>
<div class="component_wrapper">
</div>
Jquery code:
<script type="text/javascript">
$(document).ready(function(){
$(".component_wrapper").hide();
$(".component_expand").show();
$('.component_expand').click(function(){
$(".component_wrapper").slideToggle();
});
});
</script>
I try every time I click on "component expand" one DIV open. Now open two
I'd be happy with who they help me on
You need to make your selector specific, use next.
$(this).next().slideToggle();
Try:
$(document).ready(function(){
$(".component_wrapper").hide(); //You can do this using css rule itself
$(".component_expand").show().click(function(){
$(this).next().slideToggle();
});
});
Demo
Use an instance of this and .next
$('.component_expand').click(function(){
$(this).next(".component_wrapper").slideToggle();
});
Related
For example,
I have about 200 divs on my website:
<div>LINK</div>
<div>LINK</div>
.....
<div>LINK</div>
I will click the links in each div in turn and I would like to hide and I would like to hide every clicked div. How to do this???
You will have to employ javascript. Arguably the most popular approach would be to use jQuery with corresponding code along the lines of:
$("#link").click(function(){
$(this).parent("div").hide();
})
You can use jquery function hide() like this.
Exp:
$("div").on('click',function(){
$(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="link">LINK</div>
<div id="link">LINK</div>
.....
<div id="link">LINK</div>
HTML
div>LINK</div>
<div>LINK</div>
.....
<div>LINK</div>
js
$(document).ready(function(){
$("div").on('click',function(){
$(this).hide();
});
});
Okay so I have a very limited amount of knowledge with this and I can not find my answer anywhere. What I am trying to do is create multiple buttons that toggle information. So when the first toggle is clicked div 1 is toggled, when i click the second toggle div two opens and preferably div 1 closes. My code is very basic I am very new to this. Right now no matter what values I input into the toggle area both divs close. Thank you and I hope this makes sense.
Here is my code:
<script>
$(document).ready(function(){
$("button").click(function(){
$("div.house").toggle();
});
});
</script>
<button>Toggle</button>
<div class="house">
<p>SAMPLE TEXT ETC...</p>
</div>
<button>Toggle</button>
<div class="tumble-by">
<p>SAMPLE TEXT ETC...</p>
</div>
You can select the next sibling:
$("button").click(function(){
$(this).next().toggle();
});
In the above code, JavaScript this keyword refers to the clicked element. $(this) creates a jQuery collection and .next() method selects the very next sibling of the collection's element.
I agree too, that first you need to hide all divs:
$("button").click(function () {
$('div').hide();
$(this).next().toggle();
});
<script>
$(document).ready(function () {
$(document).on("click", ".js-toggle__button", function (e) {
$(".js-toggle__text").hide();
$(this).next(".js-toggle__text").show();
});
});
</script>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 1 ETC...</p>
</div>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 2 ETC...</p>
</div>
It's better to use uniquely defined identifiers when you accessing elements from JS (and don't use them for CSS — use separate names).
Your HTML code some day can be changed dramatically and JS will work anyway because it depends on identifiers but not on structure or on tag names.
I have the following HTML code. How can create a link on the entire div which when people click on it would take them to a specific link? basically an "<a></a>" tag on the entire DIV
<div class="unique">
<div>
<p>Lines of text</p>
<p>Extra lines of text</p>
</div>
</div>
here is my jQuery script i have come up with, i just have no idea how to make the link in it
<script>
$( ".unique" ).mouseover(function() {
$(this).LINK_TO_A_SPECIFIC_URL;
});
</script>
I know this is not quite what you asked for. But, #undefined made a good point in his comment to your post.
So instead of just auto forwarding to another page on a mouseover why not (if it's not clear to the user) advise that clicking will take them somewhere else. That's just nicer.
Your markup:
<div class="unique">
<div>
<p>Lines of text</p>
<p>Extra lines of text</p>
</div>
</div>
jQuery:
var fetchContent = $('.unique').html();
$(document).ready(function(){
$('.unique').on('mouseenter',function(){
$(this).html('Click here and we\'ll go somewhere else!');
});
$('.unique').on('mouseleave',function(){
$(this).html(fetchContent);
});
$('.unique').on('click',function(){
location.href='go-to-your-url';
});
});
Here's a fiddle: http://jsfiddle.net/6b8ku/1/
How about this:
<script>
$( ".unique" ).click(function() {
window.location = LINK_TO_A_SPECIFIC_URL;
});
</script>
You can change the mouse icon, when mouse over the div :
<script>
$( ".unique" ).mouseover(function() {
$(this).css( 'cursor', 'pointer' );
});
</script>
here is the JSFiddle:
http://jsfiddle.net/9zyeX/
Try this, should wrap the whole lot in an anchor.
I'm not sure if its semantic but should work
$('.unique').after(
''+$('.unique').html()+''
).remove();
Demo
I have a page that contains multiple lines like this each wrapped within <div id="result">;
<div id="result">Link Name<iframe src="http://www.domain.com/" style="width:285px;height:285px;border:0px;margin:0px" scrolling="no"></iframe></div>
I am currently using the following jQuery to display the <a> tag on hover;
$(document).ready(function(){
$('#result iframe').hover(function(){
$('#result a').fadeIn(200);
},function(){
$('#result a').fadeOut(200);
});
});
However, the hover only works on the first <div id="result"> and also shows the <a> tags for every <div id="result"> rather than just the one the user hovered on.
How can I fix this?
You can try this - Changing results to a class
$(document).ready(function(){
$('.result').hover(function(){ // <-- change to class.. and bind to wrapper div
$(this).find('a').fadeIn(200);
},function(){
$(this).find('a').fadeOut(200);
});
});
Assuming I understand your weird thing :
Html
<div class="result">
Link Name
<iframe src="http://www.domain.com/" style="width:285px;height:285px;border:0px;margin:0px;background:red;" scrolling="no"></iframe>
</div>
<div class="result">
Link Name
<iframe src="http://www.domain.com/" style="width:285px;height:285px;border:0px;margin:0px;background:red;" scrolling="no"></iframe>
</div>
jQuery
$('.result iframe').hover(function(e) {
$(this).parent().find('a').fadeIn();
}, function() {
$(this).parent().find('a').fadeOut();
});
See fiddle
Edit with hover.
Nb: e.preventDefault(); on click event if you don't want the link to submit by clicking.
Try it like this:
$(document).ready(function(){
$('#result iframe').hover(function(){
$('#result a').fadeIn(200);
$('#result a').fadeOut(200);
});
});
If you want to catch only the <a> tags not for every, but for a specific <div id="result">, you can try to specify that in your jQuery code, for example:
$(document).ready(function(){
$('#result:nth-child(1) iframe').hover(function(){
$('#result:nth-child(1) a').fadeIn(200);
},function(){
$('#result:nth-child(1) a').fadeOut(200);
});
});
So this will target only the first div with id="result". Catch the others by changing nth-child(0) - nth-child(1) - nth-child(2) ...
Another solution:
You can also set an id for every <a> tag or also, you can use a class to catch the specific element you need.
I have a div within a div. On page load, they should both be hidden, then when I trigger the slideDown() function on the outer div, I want the inner div to remain hidden. How can I achieve this?
<script>
$(function(){
$('.body').hide();
$('.display').click(function(){
$(this).closest('.wrapper').find('.body').slideDown();
});
});
</script>
<div class="wrapper">
<a class="display" href="#">Display Outer</a>
<div class="body">
Now displaying outer div
<div class="wrapper">
<a class="display" href="#">Display Inner</a>
<div class="body">
Now displaying inner div
</div>
</div>
</div>
</div>
Here is an example of it not working: http://jsfiddle.net/b7Tpt/
The reason it doesn't work is the use of find. find would traverse all levels to find the matches while the children would travel single level. So use find('.body:first') or children('.body')
$(function(){
$('.body').hide();
$('.display').click(function(){
$(this).closest('.wrapper').find('.body:first').slideDown();
});
});
Updated Example
OR
$(function(){
$('.body').hide();
$('.display').click(function(){
$(this).closest('.wrapper').children('.body').slideDown();
});
});
Updated Example
Try -
$('.display').click(function(){
$(this).siblings('.body').slideDown();
});
I think $(this).closest('.wrapper') was moving up the DOM tree and finding the top most wrapper div then opening all the body classes it found underneath. Using siblings should get the element with a body class that is directly beneath the clicked link.
Demo - http://jsfiddle.net/pMgVj/1/
try this: http://jsfiddle.net/Kf6gk/