We Keep Coding

Javascript/jQuery - Accordion onclick need to open only current div not all

I’m trying to build an accordion menu and for some reason I can’t get the accordion to function how I want.
Currently when the user clicks on the accordion div, the hidden-textarea div gets added with an active-accordion class wherever it's referenced.
How do I get the active-accordion class to only be added to the current clicked accordion div? Not all of them. I need to be able to toggle between each accordion div that is clicked.
Any help is gladly appreciated.
Thanks!
HTML
<div class="accordion-block">
<div class="container">
<div class="gallery-wrap">
<div class="item-accordion">
<div class="accordion">
<div class="title text accordion-title”>Title of Accordion</div>
<div class="animation-container">
<div class="hidden-textarea active-accordion”>
<div class="body text”>Lorem Ipsum </div>
<div class="buttonArrayV1”>Click Me</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-block">
<div class="container">
<div class="gallery-wrap">
<div class="item-accordion">
<div class="roles-description accordion">
<div class="title text accordion-title”>Title of Accordion</div>
<div class="animation-container">
<div class="hidden-textarea active-accordion">
<div class="body text”>Lorem Ipsum </div>
<div class="buttonArrayV1”>Click Me</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.active-accordion {
display: block !important;
}
.hidden-textarea {
display: none;
}
JS
TestJs.HorizontalAccordion.prototype.onResize = function() {
$(window).resize(function() {
if ($(window).width() < 1200) {
$('.accordion').on( "click", function(e) {
e.preventDefault();
e.stopPropagation();
$(".hidden-textarea").addClass("active-accordion");
// $('.hidden-textarea').removeClass("active-accordion");
// $('.hidden-textarea').toggle("active-accordion");
return false;
});
}
if ($(window).width() >= 1200) {
}
});
};

Update: I updated the onclick function and am able to toggle successfully. Now I just need to open 1 accordion not all of them.
Any help is gladly appreciated. Thank you.
$('.horizontalAccordionV1 .accordion').on( "click", function() {
event.preventDefault();
// create accordion variables
var accordion = $('.hidden-textarea');
// toggle accordion link open class
accordion.toggleClass("active-accordion");
// toggle accordion content
accordionContent.slideToggle(250);
});

Problem solved! Added this to my JS click function and removed everything else.
$(this).find('.hidden-textarea').toggleClass('active-accordion');

don't hide Lightbox if child is clicked

I have a Lightbox, and inside a centered child with content. The child also has a close button. I only want to hide the Lightbox, when the Lightbox is clicked or the close button. At the moment it also gets closed, if the child is clicked.
js fiddle
HTML
<div class="lightbox">
<div class="child">
<a class="close" href="#"><span>x</span></a>
<header>
<h4>content</h4>
</header>
</div>
</div>
JS
$('.lightbox, .close').on('click', function(){
$('.lightbox').fadeOut();
});

Try to play with e.target like,
$('.close,.lightbox').on('click', function (e) {
if ($(e.target).parents(".lightbox").length && !$(e.target).is(".close,.close > span"))
return;
$('.lightbox').fadeOut();
});
DEMO

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();
});
});

Bringing a div back from .hide or .fadeOut onclick

Okay, so this is the example HTML.
<a href="http://www.google.com/">
<div id="link">
This is a link
</div>
</a>
<div class="example">
Example div 1
</div>
<div class="example">
Example div 2
</div>
<div class="example">
Example div 3
</div>
Whenever #link is clicked, all the divs with the class .example are hidden.
$("#link").click(function ( event ) {
$(".example").hide();
});
or
$("#link").click(function ( event ) {
$(".example").fadeOut("fast");
});
Now whenever any spot on the page is clicked, all of the .example divs return.
Is it possible? It doesn't all necessarily have to be done with jQuery.Thanks in advance.

$('body').live('click', function() {
$(".example").show();
});

How to toggle (jQuery) with an anchor

I have a small problem with jQuery.
The situation:
I have a piece of jQuery code, where I toggle results.
JS Code:
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
//$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return true; //Prevent the browser jump to the link anchor
});
Now I want to open - toggle an item on anchor position from the URL like (http://x.com/page.php#toggleItem2)
Question:
How read toggleItem2 from URL and open exactly this section?
Additional:
HTML Code:
<div class="container">
<h2 class="acc_trigger">Item1</h2>
<div class="acc_container">
<div class="block">
Inner Text in toggle 1
</div>
</div>
<h2 class="acc_trigger">Item2</h2>
<div class="acc_container">
<div class="block">
Inner Text in toggle 2
</div>
</div>
<h2 class="acc_trigger">Item3</h2>
<div class="acc_container">
<div class="block">
Inner Text in toggle 3
</div>
</div>
</div>
I hope the problem is clearly defined.

You should give your divs IDs according to the anchors, e.g.
<h2 class="acc_trigger">Item1</h2>
<div id="toggle1" class="acc_container">
<div class="block">
Inner Text in toggle 1
</div>
</div>
You can get the document fragment from the location object:
document.location.hash
Then it is simply (assuming the other containers are all hidden):
$(document.location.hash).slideDown().prev().addClass('active');

Try jquery toggle itself
http://api.jquery.com/toggle/

This is held within the window.location.hash variable.

You can do something like this:
http://jsfiddle.net/b6Znw/
Javascript:
$().ready(function(){
$('.acc_trigger a').click(function(){
$(this).closest('.acc_trigger').next('.acc_container').toggle()
return false;
})
})