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

JQuery hide() not persisting after hide event

I'm trying to hide a visible section then show a hidden section using JQuery .hide() and .show(). When the event fires (on clicking an image) it only hides the visible section momentarily, then becomes visible again with the previously hidden section now visible below the first visible section. Based on the docs I've read and some tutorials I've watched this shouldn't be happening.
HTML:
<div class="transition-div">
<section class="project-section">
<div class="project-wrapper" id="project-one">
<div class="desc-text">
<h2>Header</h2>
</div>
<div class="project-image-wrapper">
<img class="project-image" id="project-img-one" src="images/img1.png">
<button class="project-button">Button
</button>
</div>
</div>
</section>
<section class="project-section hidden">
<div class="project-wrapper">
<div class="desc-text">
<h2>Header</h2>
<p>Some description text</p>
</div>
<div class="project-image-wrapper">
<img class="project-image" src="images/img1.png">
</div>
</div>
</section>
</div>
JS:
$('.hidden').hide();
var slideSection = function() {
$('.project-image-wrapper').click(function() {
var $parentDiv = $(this).parents('.transition-div');
var $childToShow = $parentDiv.find('.hidden');
var $childToHide = $childToShow.siblings('.project-section');
$childToHide.hide(300, hideActiveSection());
function hideActiveSection() {
$childToHide.addClass('hidden');
$childToShow.show(300, function() {
$(this).removeClass('hidden');
});
}
});
};
slideSection();
How would I get the section I want to hide to do so persistently until I click the currently visible project image to show it? Could my CSS be interfering with what I want to do here? If so I'll post the code. Thanks!

jQuery click to scroll to cloest div.class and show not working

hi does anyone have any ideas what im doing wrong here?
When you click show content i want it to find the closest div with the class i ask and scroll to it but does not work... im new to jquery so maybe im doing wrong but i think my logic is correct haha
getting an error in console:
Cannot read property 'top' of undefined
Example:
$(document).ready(function() {
// show examples
$(document).on("click", ".show-syntax", function(e) {
var ele = $(this).parent().closest(".render-syntax");
// this will search within the section
ele.show();
$("html, body").animate({
scrollTop: $(ele).offset().top
}, 100);
e.preventDefault();
});
});
.render-syntax {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
show content
</div>
<div class="render-syntax">
<p>content to show</p>
</div>
<div class="container">
show content
</div>
<div class="render-syntax">
<p>content to show</p>
</div>
<div class="container">
show content
</div>
<div class="render-syntax">
<p>content to show</p>
</div>

closest doesn’t go through the siblings; next does the job you need. Simply replacing closest by next in your code will give you the proper behavior.
var ele = $(this).parent().next(".render-syntax");
Otherwise ele won’t have any elements, ele.offset() returns null and then there’s no top property of null, hence the error.

The Problem is NOT that ele.offset().top is undefined, it is that ele is undefined.
So I opened JS Fiddle, f***** it until it worked and now I can give you this:
$(document).ready(function () {
// show examples
$(document).on("click", ".show-syntax", function (e) {
var ele = $(this).parent().find(".render-syntax");
// this will search within the section
if (ele.css("display") == "none")
{
ele.show();
$("html, body").animate({
scrollTop: $(ele).offset().top
}, 100);
e.preventDefault();
} else
{
ele.hide();
e.preventDefault();
}
});
});
.render-syntax {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container"> show content
<div class="render-syntax">
<p>content to show</p>
</div>
</div>
<div class="container"> show content
<div class="render-syntax">
<p>content to show</p>
</div>
</div>
<div class="container"> show content
<div class="render-syntax">
<p>content to show</p>
</div>
</div>
I'm sorry for the poorly done JS {}'s, but JS Fiddle is just not my editor :D

Jquery Accordion - Make Clicked element scroll to top of page

I am using this accordion script for an FAQ page: http://www.snyderplace.com/demos/accordion.html
It's great except for one problem which is especially evident on mobile devices. When you click on a question and it has a lot of content inside, it expands upwards off the screen, to where you have to scroll up to see the question and the beginning of the content.
Ideally I'd like to have it to where the script scrolls the question to the top of the page/viewport when you click on it. If anyone has an idea of what to tweak in the script that would be amazing!

You may try something like this. You don't need a plugin for an accordion:
Edited version with icons, default open, and touch enabled scroll to top
https://jsfiddle.net/07fdq3t1/10/
Add the class show to the one you want to open.
This could probably be written more efficiently as there's repeating code, but it should work.
jQuery
$(document).ready(function() {
$('.accordion').click(function(){
if($(this).next('.container').is(':visible')) {
$(this).removeClass('show');
$(this).next('.container').slideUp();
}
else {
$('.accordion').find('.container:visible').slideUp();
$('.accordion').removeClass('show');
$(this).addClass('show');
$(this).next('.container').slideDown();
}
});
$('.accordion').on( "touchstart", function(){
if($(this).next('.container').is(':visible')) {
$(this).removeClass('show');
$(this).next('.container').slideUp();
}
else {
$('.accordion').find('.container:visible').slideUp();
$('.accordion').removeClass('show');
$(this).addClass('show');
$(this).next('.container').slideDown();
$('html, body').animate({
scrollTop: $(this).offset().top
}, 200);
}
});
});
HTML
<div class="accordion">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
<div class="accordion show">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
Note you will need to include jQuery in your code.

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