<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();
});
Related
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');
I'm trying to create a drop down effect similar to this image: GIF, however with what I have so far: EXAMPLE I can't seem to figure out a way to add more than one link, if I do add just another content div it doesn't show up.. Hope someone can help, been losing sleep over this haha. Thanks
HTML:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
</div>
JS:
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $(this).next();
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});
What I would try:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
<div class="content" onclick="initContent('exampleNew')"><em>Example Project 2</em></div>
</div>
Just put all your links in a single content div:
https://jsfiddle.net/sfcm95yz/3/
<div class="content">
<div class="item" onlclick="initContent('example')">
<em>Example Project</em>
</div>
<div class="item" onlclick="initContent('example2')">
<em>Example Project 2</em>
</div>
</div>
It's because you are sliding down the content div that is right after the header class element ($content = $(this).next();), which applies a display: block to it. If you add another content div, it isn't going to be right after that header and so won't be shown.
You can either change your JavaScript to target all content divs, or rearrange your HTML, something like this:
<div class="container">
<div class="header">Projects</div>
<div class="content">
<div onclick="initContent('example')">
<em>Example Project</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 2</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 3</em>
</div>
</div>
</div>
If you want to modify your JS and keep the existing markup, .nextAll() will select all of $header's siblings (.next() only selects one sibling). You can also add a selector argument to be sure you only select elements with the class "content".
$(".header").click(function() {
$header = $(this);
//getting the sibling ".content" elements
$content = $(this).nextAll(".content");
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});
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.
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();
});
I am trying to load a specific sibling for each div using fancybox.
E.g:
<div id ="content">
<div class="item1">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 1</span></div>
</div>
<div class="item2">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 2</span></div>
</div>
<div class="item3">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 3</span></div>
</div>
<div class="item4">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 4</span></div>
</div>
</div>
I tried to do the config using the property Content, but not got it, is it possible to get each hidden for each specific item ?
You can use below code:
$(function(){
$("div.pop-ups span").click(function(){
$.fancybox({ content: $(this).parent().next().html() });
});
});
This will show the content of relevant div in fancybox.
You can call this function to open some specific div content in a fancybox.
function OpenDiv(divIDtoopen) //eg. divIDtoopen= #divID //# is must to be prepended to divID for selection
{
$(document).ready(function ()
{
$.fancybox.open(
{
href: divtoopen
}
);
}
);
}