jquery show only child - javascript

I have a problem : I use classes on a div for simplicity, I would like to show a hidden div after a click, but only on that div, the problem is it shows on all divs, and I can't seem to get it working, here is a jsfiddle with the problem : http://jsfiddle.net/cWNvT/
HTML:
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
JavaScript:
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function() {
$('.left').children().show();
});
});​
Anyone have a solution for this ?

Try this working fiddle.
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function(){
$(this).parent().children().show();
});
});
All I have done is use $(this).parent() instead of using your $(".left") selector.

Try finding the parent of the clicked element only, and using its children:
http://jsfiddle.net/cWNvT/1/
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function(){
$(this).closest(".left").children().show();
});
});
​
$(".left") selects all elements with class .left in the document. $(this).closest(".left") finds the first parent of the clicked link that has class .left.

Change your code to this:
$('.left a.edit-click').click(function(){
$(this).next('.edit').show();
});
http://jsfiddle.net/cWNvT/3/

Related

jQuery toggle of next div with this class

I'm trying to achieve a toggle effect on a website.
The html looks like this:
<div class="prod-toggle-click">
<h2>Test</h2>
<div class="prod-toggle">
<p>test</p>
</div>
</div>
<div class="prod-toggle-click">
<h2>Test 2</h2>
<div class="prod-toggle">
<p>test 2</p>
</div>
</div>
And the JS:
<script>
$(".prod-toggle-click").click(function(){
$(this).parent().find('.prod-toggle').toggle();
});
</script>
This toggles the .prod-toggle of both divs. But I only need the .prod-toggle of the parent to toggle.
I've tried it like this:
<script>
$(".prod-toggle-click").click(function(){
$(this).next('.prod-toggle').slideToggle();
});
</script>
but that's not working either. Any suggestions?
You just need to use find('.prod-toggle') and remove the parent() or next() which you are using. This is because the div with class prod-toggle is inside the div with class prod-toggle-click so find() will simply work for you here.
$(".prod-toggle-click").click(function(){
$(this).find('.prod-toggle').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prod-toggle-click">
<h2>Test</h2>
<div class="prod-toggle">
<p>test</p>
</div>
</div>
<div class="prod-toggle-click">
<h2>Test 2</h2>
<div class="prod-toggle">
<p>test 2</p>
</div>
</div>
You need put this under $(document).ready and also remove parent()
$(document).ready(function () {
$(".prod-toggle-click").click(function(){
$(this).find('.prod-toggle').toggle();
});
});
For this specific case, I would use children() instead of find(). It only looks at the immediate children of the node. It is more explicit and that's the reason of my preference. I guess performance is not an issue but children() should also be faster.
$(".prod-toggle-click").click(function(){
$(this).children(".prod-toggle").toggle();
});

Change class by searching for the closest class

I want to change the class of my closest div after pressing a button. Let me make it more clear by showing some code. I have the following HTML:
<div class="wrapper">
<div class="title">
<div class="aa">-</div>
<div class="ab">-</div>
<div class="ac">-</div>
<div class="navigation">
Test link
</div>
</div>
<div class="content not_active">
<p>
Text
</p>
</div>
</div>
With the following CSS:
.active{
display:block;
}
.not_active{
display:none;
}
Now my goal is to find the closest div that has the class: .not_active and change that class after pressing on the hyperlink with class: navigation.
I tried it with jQuery with the following code:
$(function () {
$('.navigatie a').click(function () {
$(this).parent().parent().find('.not_active').toggleClass('active');
});
});
but with no succes. What I am doing wrong?
JSFIDDLE DEMO
It is because you are using .navigatie class instead of .navigation.
Here the JSFiddle.

Hide Other Divs when clicking new Div with the same class

I cannot figure out how to add in the functionality of closing other divs when I click a div new div with the same class. I know it should be simple, but just can't get it to work. Here is the fiddle - http://jsfiddle.net/dnym5p1s/
added correct link
<div class="option-heading">
<div class="arrow-up">▲</div>
<div class="arrow-down">▼</div>
<h1>Year1</h1>
</div>
<div class="option-content">
Content
</div>
<div class="option-heading">
<div class="arrow-up">▲</div>
<div class="arrow-down">▼</div>
<h1>Year2</h1>
</div>
<div class="option-content">
Content
</div>
$(".option-content").hide(); $(".arrow-up").hide();
$(".option-heading").click(function(){
$(this).next(".option-content").slideToggle(150);
$(this).find(".arrow-up, .arrow-down").toggle();
});
This would do it:
$(".option-content,.arrow-up").hide();
$(".option-heading").click(function () {
$(".option-content").not($(this).next()).slideUp(250);
$(".option-heading").not(this).find("div.arrow-up").hide();
$(".option-heading").not(this).find("div.arrow-down").show();
$(this).next(".option-content").slideToggle(250);
$(this).find(".arrow-up, .arrow-down").toggle();
});
jsFiddle example
Just add $(".option-content").hide(); on top of your click listener like so:
$(".option-heading").click(function(){
$(".option-content").hide();
$(this).next(".option-content").slideToggle(150);
$(this).find(".arrow-up, .arrow-down").toggle();
});

Constrain toggle effect

I've put this jQuery together, when the document is ready the div with a class of bio.read_more is hidden.
The default behaviour for the a tag is removed with e.preventDefault
When btn.expand_bio is clicked bio.read_more is displayed.
The only problem is all the bio.read_more divs are displayed? I only want the one that's related to expand. Can anyone help?
$(document).ready(function(){
$(".bio.read_more").hide();
$(".btn.expand_bio").click(function(e){
e.preventDefault();
$(".bio.read_more").toggle();
});
});
(update) Added HTML
<div class="bio intro">
<p>Intro paragraph</p>
<a class="btn expand_bio" href="#">Read more</a>
</div>
<div class="bio read_more">
<p>Expanded text here</p>
</div>
</div>
Use this as reference to the element being clicked.
$(document).ready(function() {
$(".bio.read_more").hide();
$(".btn.expand_bio").click(function(e) {
e.preventDefault();
$(this).closest('.bio.intro').next('.read_more').toggle();
});
});

Javascript - jquery,accordion

<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?
You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();
I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>
Why not use slideToggle() instead of IF statements....
Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});

Categories