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');

How to get the Dynamic values of the Title

I have a code where the button and title are in same div container like this:
<div class="cmpl-teaserd__content">
<div class="cmpl-teaserd__pretitle">Featured Sample Title</div>
<div class="cmpl-teaserd__title wow animated" style="visibility: visible;">
<h2><b>Borcher</b> <span style="font-weight: normal;">Collection</span></h2>
</div>
<div class="cmpl-teaserd__description">
<p>Sample text Sample text Sample text Sample text</p>
</div>
<div class="cmpl-teaserd__action-container">
<a class="cmpl-teaserd__action-link" href="#.html" target="_self" title="">View Collection</a>
</div>
Am using the Code like this:
$(document).on("click","a.cmpl-teaserd__action-link",function(){
console.log("Title:" + $(this).text() + " Link Clicked");
});
Requirement:
I want to get the Title1(div.cmpl-teaserd__pretitle) & Title2(div.cmpl-teaserd__title wow animated) of the container once the link(a.cmpl-teaserd__action-link) got clicked.
Kindly provide your feedback to get the value

You can loop through all the divs inside the selected div and then maintain a counter to print just the div you want to print. It can be better implemented.
this might help.
$(document).on("click","a.cmpl-teaserd__action-link",function(){
var count = 1;
$('div.cmpl-teaserd__content div').each (function (count) {
count++;
if(count<3){
console.log("Title"+count +" "+ $(this).attr('class'));
}
});
});

Show div on click and hide on next click

I want to show information based on the item that it is clicked on.
I have some jquery code that works, but not when there are multiple div's in a div.
Here, the first part is what I want, the second part doesn't work because there are div's in the main div. hope that makes sense. How do i make it work?
I think it has something to do with :
$("#parent2").find("div:eq('" + i + "')").show().siblings().hide();
Fiddle

You have to toggle direct descendants, if you just find('div') it will find nested too.
So you can do either this:
$("#parent2 > div:eq('" + i + "')").show().siblings().hide();
or this:
$("#parent2").children("div:eq('" + i + "')").show().siblings().hide();

You need to use children() instead of .find() and .index(element) can be used to get index of anchor element to be displayed.
$(document).ready(function() {
$('#div1, #div2, #div3, #div4').hide();
$('#div5, #div6, #div7, #div8').hide();
$(".firstpart a").click(function() {
$("#parent1").children("div").eq($(".firstpart a").index(this)).show().siblings().hide();
});
$(".secondpart a").click(function() {
$("#parent2").children("div").eq($(".secondpart a").index(this)).show().siblings().hide();
});
});
Fiddle
Additionally, You don't need .each() to bind event handler.

https://jsfiddle.net/5yyrojsq/4/ You should try to use declarative JS and use classes instead of ID to match elements.
<div class="firstpart">
show div1
show div2
show div3
show div4
</div>
<div id="parent1">
<div id="div1" class="child_div">hello1</div>
<div id="div2" class="child_div">hello2</div>
<div id="div3" class="child_div">hello3</div>
<div id="div4" class="child_div">hello4</div>
</div>
and the JS
$(document).ready(function(){
$('.child_div').hide();
$(".btn").click(
function () {
$('.child_div').hide();
var the_div_id_to_show = $(this).attr("data-show");
$("#" + the_div_id_to_show).show("slow");
}
);
});
I have simplified the problem to show the general principle as opposed to the specific answer.

You should try doing a toggle() instead of show/hide and then do that on click, like this:
$(this).on('click', function() {
$("#parent1").find("div:eq('" + i + "')").toggle().siblings();
)};

Try this ;)
Used a class with div to access them in eq()
$(document).ready(function() {
var $parent1 = $("#parent1");
var $parent2 = $("#parent2");
$(".firstpart a").each(function(i) {
$(this).click(function() {
$('.item:visible', $parent1).hide();
$parent1.find("div:eq('" + i + "')").show();
});
});
$(".secondpart a").each(function(i) {
$(this).click(function() {
$('.item:visible', $parent2).hide();
$parent2.find("div.item:eq('" + i + "')").show();
});
});
});
.item {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="firstpart">
show div1
show div2
show div3
show div4
</div>
<div id="parent1">
<div id="div1" class="item">hello1</div>
<div id="div2" class="item">hello2</div>
<div id="div3" class="item">hello3</div>
<div id="div4" class="item">hello4</div>
</div>
<br>
<br>
<br>
<div class="secondpart">
show div5
show div6
show div7
show div8
</div>
<div id="parent2">
<div id="div5" class="item">
<div class="row5">hello5</div>
</div>
<div id="div6" class="item">
<div class="row6">hello6</div>
</div>
<div id="div7" class="item">
<div class="row7">hello7</div>
</div>
<div id="div8" class="item">
<div class="row8">hello8</div>
</div>
</div>

I would change this to make your code more accesible and make use of the anchors href:
// probably want to change this to target a class rather than all anchors
$("a").click(function(e) {
e.preventDefault(); // stop default action of anchor
$($(this).attr('href')).show().siblings().hide(); // show the targetted div and hide it's siblings
});
.parent > div {display:none;} /*start divs hidden*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="firstpart">
show div1 <!-- give anchors href of the div they are targeting, maybe a class too -->
show div2
show div3
show div4
</div>
<div id="parent1" class="parent">
<div id="div1">hello1</div>
<div id="div2">hello2</div>
<div id="div3">hello3</div>
<div id="div4">hello4</div>
</div>
<br><br><br>
<div class="secondpart">
show div5
show div6
show div7
show div8
</div>
<div id="parent2" class="parent">
<div id="div5"><div class="row5">hello5</div></div>
<div id="div6"><div class="row6">hello6</div></div>
<div id="div7"><div class="row7">hello7</div></div>
<div id="div8"><div class="row8">hello8</div></div>
</div>

Updated your same piece of code using toggle() instead of show() and hide()
HTML
<div class="firstpart">
show div1
show div2
show div3
show div4
</div>
<div id="parent1">
<div id="div1">hello1</div>
<div id="div2">hello2</div>
<div id="div3">hello3</div>
<div id="div4">hello4</div>
</div>
<br><br><br>
<div class="secondpart">
show div5
show div6
show div7
show div8
</div>
<div id="parent2">
<div id="div5">hello5</div>
<div id="div6">hello6</div>
<div id="div7">hello7</div>
<div id="div8">hello8</div>
</div>
jQuery
$(document).ready(function(){
$('#div1, #div2, #div3, #div4').toggle();
$(".firstpart a").each(function(i) {
$(this).click(function() {
$("#parent1").find("div:eq('" + i + "')").toggle().siblings();
});
});
});
$(document).ready(function(){
$('#div5, #div6, #div7, #div8').toggle();
$(".secondpart a").each(function(i) {
$(this).click(function() {
$("#parent2").find("div:eq('" + i + "')").toggle().siblings();
});
});
});
Fiddle

I think this will work for your 'parent2' div:
$("#parent2").children("div:eq('" + (i) + "')").show().siblings().hide();
});

jQuery how to make slideToggle applies one each item

How can I make this toggle fadein fadeout applies on each itemsblock? when I click anyone, it applies all of them.
Could someone please help ? Thanks
Online Sample
<div class="items">
<div class="warp">
<span class="change">Tester</span>
<span class="click">expand</span>
</div>
<div class="invisible">
<div class="red"> red </div>
<div class="black"> black </div>
</div>
</div>
<div class="items">
<div class="warp">
<span class="change">Tester</span>
<span class="click">expand</span>
</div>
<div class="invisible">
<div class="red"> red </div>
<div class="black"> black </div>
</div>
</div>
jQuery
$('.invisible').hide();
$('.warp').addClass('bg');
$(".warp").click(function () {
$(".invisible").slideToggle("slow", function () {
if ($(this).is(':visible')) {
$('.warp').removeClass('bg');
}else{
$('span.click').css('visibility', 'visible');
$('.warp').addClass('bg');
}
});
$('span.click').css('visibility', 'hidden');
});

How can I make this toggle fadein fadeout applies on each itemsblock?
when I click anyone, it applies all of them.
This is because you use $(".invisible") which selects all elements with the class invisible. You have to find the element related to your toggle element(your .warp element), which in your case would be like this: $warp.next(".invisible").
See the updated FIDDLE.
Updated your jQuery code:
$(".warp").click(function () {
var $warp = $(this);
$warp.next(".invisible").slideToggle("slow", function () {
if ($(this).is(':visible')) {
$warp.removeClass('bg');
}else{
$warp.find('span.click').css('visibility', 'visible');
$warp.addClass('bg');
}
});
$warp.find('span.click').css('visibility', 'hidden');
});

HERE: jsfiddle
jquery:
$('.invisible').hide();
$(".warp").click(function () {
$(this).next('div').slideToggle("slow", function () {
$(this).prev('div').toggleClass('bg');
$(this).prev('div').find('.click').slideToggle("fast", function () {});
});
});

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