Develop Reference

Closing accordion on click javascript

I am trying to close an accordion on the next click after opening an accordion item. Given the current way that I have it set up (below), what would be the best approach to accomplishing this? My code is the following:
HTML:
<div class="faq-accordion">
<section id="1">
<h4>Accordion Title</h4>
<div>
<p>Accordion Content</p>
</div>
</section>
</div>
Javascript:
$(document).ready(function(){
$('.faq-accordion h4').click(function(){
if( $(this).next().is(':hidden') ) {
$('.faq-accordion h4').removeClass('faq-active').next().slideUp();
$(this).addClass('faq-active').next().slideDown();
}
return false;
});
});

You can do it this way:
(function($) {
var accordions = $('.accordion .content').hide();
$('.accordion .header > a').click(function() {
accordions.slideUp();
if($(this).parent().next().is(':visible')) {
$(this).parent().next().slideUp();
} else {
$(this).parent().next().slideDown();
}
return false;
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
<div class="header">Accordion title 1</div>
<div class="content">Content 1</div>
<div class="header">Accordion title 2</div>
<div class="content">Content 2</div>
<div class="header">Accordion title 3</div>
<div class="content">Content 3</div>
</div>
Let me know if you have any questions.
I hope it helps.

Jquery Accordion first panel auto opened

Can i set first panel on Jquery automatically opened?
My accordion panel is close all.
This is my html
<div class="accordionx">
<div class="acitemx">
<h3>First Panel</h3>
<div class="accx">
This is the content
</div>
</div>
<div class="acitemx">
<h3>Second Panel</h3>
<div class="accx">
This is the content
</div>
</div>
<div class="acitemx">
<h3>Third Panel</h3>
<div class="accx">
This is the content
</div>
</div>
This is my JS script
$(".acitemx h3").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(500, function () {
$(this).parent().toggleClass('current');
});
});
This the JSFiddle Link http://jsfiddle.net/bupd32rq/
Thanks for your help

Panels that opened were added with current class, then put class current manually on first panel and respective div with style="display:block":
<div class="acitemx current">
<h3>First Panel</h3>
<div class="accx" style="display:block">
This is the content
</div>
</div>
Updated DEMO

you can just add .eq(0).click()
$(".acitemx h3").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(500, function () {
$(this).parent().toggleClass('current');
});
}).eq(0).click();
DEMO

toggle - Jquery I want to whenever click on first button it show and then click on second button then instead first button's div tag hide

See Here i create my css file for show paragraph
<div>About</div>
<div>Photos</div>
<div>Rates and Reviews</div>
</div>
<!-- middel -->
<div class="col-lg-6" align="center" style="background-color:#CFF">
<div id="about" >about </div>
<div id="photos" >photos</div>
<div id="rates" >Rates and Reviews</div>
</div>
see here, describe jquery code. please help in implements
<script type="text/javascript">
$(function () {
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).toggleClass('hidden show');
});
});

toggle() function is what you need to show or hide specific element.
.toggleClass only add or remove specific class but it will not work for adding hidden and show class at same time
Replace $(target).toggleClass('hidden show'); with $(target).toggle();
$(function () {
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$('#mainDiv').find('a').removeClass("active");
$(this).addClass('active');
$("#detailsDiv").children().hide();
$(target).toggle();
});
});
.active{
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv"><div>About</div>
<div>Photos</div>
<div>Rates and Reviews</div>
</div>
<!-- middel -->
<div class="col-lg-6" id="detailsDiv" align="center" style="background-color:#CFF">
<div id="about" >about </div>
<div id="photos" style="display: none;">photos</div>
<div id="rates" style="display: none;">Rates and Reviews</div>
</div>

Toggle multiple classes

I'm stuck with a menu I'd love to add to my website.
I have branched my work in:
Commercial
Fashion
Music
Portrait
So I have a menu like this one above.
When I click on one section, let's say "Commercial" I want all the others to be display:none.
Have a look at this FIDDLE: http://jsfiddle.net/bfevLsj2/8/
$(document).ready(function() {
$("#commercial").click(function() {
$(".commercial").toggleClass("show");
$(".fashion").toggleClass("hid");
$(".music").toggleClass("hid");
$(".portrait").toggleClass("hid");
});
});

You need siblings() width jquery
Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
$("[id]").click(function(){ //onclick on element with ID
var selected = $(this).attr("id"); // save the value of that ID
$("."+ selected).show().siblings("[class]").hide()//find the class with the same value as class and show it then find all siblings class and hide them
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="commercial">Commercial</div>
<div id="fashion">Fashion</div>
<div id="music">Music</div>
<div id="portrait">Portrait</div><br />
<div class="commercial">C</div>
<div class="fashion">F</div>
<div class="music">M</div>
<div class="portrait">P</div>
BUT a better approach would be to use data-*
$("[data-tab]").click(function(){
var current = $(this).attr("data-tab");
$("[data-content="+ current +"]").show().siblings("[data-content]").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div data-tab="commercial">Commercial</div>
<div data-tab="fashion">Fashion</div>
<div data-tab="music">Music</div>
<div data-tab="portrait">Portrait</div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>
AGAIN it is better to use pure javascript
function runClick (event) {
var current = this.getAttribute("data-tab");
for( var content = 0; content < dataContent.length; content++) {
dataContent[content].style.display = "none"
}
document.querySelector("[data-content="+ current + "]").style.display = "block"
}
var dataTabs = document.querySelectorAll("div[data-tab]"),
dataContent = document.querySelectorAll("div[data-content]");
for(var tab = 0; tab < dataTabs.length; tab++){
dataTabs[tab].addEventListener("click", runClick , false);
}
<div data-tab="commercial">Commercial</div>
<div data-tab="fashion">Fashion</div>
<div data-tab="music">Music</div>
<div data-tab="portrait">Portrait</div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>

HTML:
<div id="commercial" class="menuItem">Commercial</div>
<div id="fashion" class="menuItem">Fashion</div>
<div id="music" class="menuItem">Music</div>
<div id="portrait" class="menuItem">Portrait</div><br />
<div class="commercial content">C</div>
<div class="fashion content">F</div>
<div class="music content">M</div>
<div class="portrait content">P</div>
JavaScript:
$(document).ready(function(){
$(".menuItem").click(function(){
var id = this.id;
$('.content').removeClass('show').addClass('hid');
$('.'+id).addClass('show').removeClass('hid');
});
});
CSS:
.hid {
display:none;
}
.show {
display:block;
}
Fiddle

Have a look at this fiddle, think it's what you want
Essentially you can use .toggle() to traverse and show/hide according to whether it's the one you want to show.
$(function(){
// find all the links that you can click
$("div.clickable a").click(function(e) {
// when they're clicked, find the identifier of
// the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according
// to whether it's the tab you want
$("div.section").each(function(index, div) {
$(div).toggle($(div).hasClass(clickedId));
});
});
});
And the HTML:
<div id="commercial" class="clickable">Commercial</div>
<div id="fashion" class="clickable">Fashion</div>
<div id="music" class="clickable">Music</div>
<div id="portrait" class="clickable">Portrait</div>
<br />
<div class="commercial section">C</div>
<div class="fashion section">F</div>
<div class="music section">M</div>
<div class="portrait section">P</div>
HTH
Edited to add an "ALL" link in this fiddle
$("div.clickable a").click(function(e) {
// when they're clicked, find the identifier of
// the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according
// to whether it's the tab you want
$("div.section").each(function(index, div) {
$(div).toggle($(div).hasClass(clickedId) || clickedId=="ALL");
});
});
After adding this to the list of clickable divs:
<div id="ALL" class="clickable">
ALL
</div>

Your could that more easy like:
<div class="link" id="commercial">Commercial</div>
<div class="link" id="fashion">Fashion</div>
<div class="link" id="music">Music</div>
<div class="link" id="portrait">Portrait</div><br />
<div class="commercial elem">C</div>
<div class="fashion elem">F</div>
<div class="music elem">M</div>
<div class="portrait elem">P</div>
<script type="text/javascript">
$(document).ready(function(){
$(".link").click(function(){
var id = $(this).attr('id');
$('.elem').hide();
$('.' + id).show();
});
});
</script>

javascript loop needed to show hidden list onclick one at a time

I have a list of hidden divs and would like to be able to show one div at a time, when a button is pressed, .. I am having a hard time writing the proper loop for this.
product_options: function() {
var product_option = $('.product_product_options_option_name')
$(product_option).css("display", "none");
$('.add_product_option').on('click', function (e) {
e.preventDefault();
$(product_option).each(function(){
$(this).css("display", "block")
});
});
}
currently it displays them all onclick, i deleted all my other loop attempts, bc they were egregiously wrong or were not doing much

Try
product_option.first().show(); //show only the first one
product_option = product_option.slice(1); //remove the first one
Demo:
$(function() {
var options = $('.product_option').hide();
$('.add').click(function() {
if(options.length) {
options.first().show();
options = options.slice(1);
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product_option">Option 1</div>
<div class="product_option">Option 2</div>
<div class="product_option">Option 3</div>
<div class="product_option">Option 4</div>
<div class="product_option">Option 5</div>
<div class="product_option">Option 6</div>
<div class="add">Add product option</div>

product_options: function() {
var product_option = $('.product_product_options_option_name')
$(product_option).css("display", "none");
$('.add_product_option').on('click', function (e) {
e.preventDefault();
$(product_option + ':hidden').eq(0).show();
});
}

try this : demo
$('.product_product_options_option_name').hide();
var count = 0;
$('.add_product_option').on('click',function(){
$('.product_product_options_option_name:eq('+count+')').show();
count++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="add">
<input type="button" class="add_product_option" value="click" />
</div>
<div class="product_product_options_option_name">
<label>1div</label>
</div>
<div class="product_product_options_option_name">
<label>2div</label>
</div>
<div class="product_product_options_option_name">
<label>3div</label>
</div>
<div class="product_product_options_option_name">
<label>4div</label>
</div>