Simplify JavaScript Accordion - javascript

I have got a script which works really well for creating accordions. The only issue is I have to create extra sections all the time to add a new one. Is there any way that it can be simplified to minimise the extra work and script?
$(document).ready(function(){
$(".accord-one").click(function(){
$(".accordoneContent").slideToggle("normal");
});
});
$(document).ready(function(){
$('.accord-two').click(function(){
$(this).next('.accordtwoContent').slideToggle("normal");
return false;
});
});
$(document).ready(function(){
$('.accord-three').click(function(){
$(this).next('.accordthreeContent').slideToggle("normal");
return false;
});
});
$(document).ready(function(){
$('.accord-four').click(function(){
$(this).next('.accordfourContent').slideToggle("normal");
return false;
});
});

What if you just remove the "numbers"?
$(document).ready(function() {
$(".accord").click(function() {
$(this).next(".accordContent").slideToggle("normal");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accord">button 1</div>
<div class="accordContent" style="display:none">content 1</div>
<div class="accord">button 2</div>
<div class="accordContent" style="display:none">content 2</div>

In your markup change all the accordion classes (accord-one, accord-two etc.) to just accord and then change all the content classes (accordoneContent, accordtwoContent etc.) to just accord-content. Then you just need this code for them all to work...
$(document).ready(function(){
$('.accord').click(function(){
$(this).next('.accord-content').slideToggle("normal");
return false;
});
});
That will attach the click event handler to each accordion element and look for the relative content to toggle.

Related

How do I store multiple divs with toggleClass in localStorage?

I'm trying to add localStorage to the toggleClass function in jQuery, so that multiple divs with the .selected css class stay .selected when reloading or closing the browser. The toggleClass seems to work, but I can't seem to get the localStorage to work. What am I doing wrong?
Here's the fiddle.
JS:
$(function(){
$('.mix').click(function() {
window.localStorage.setItem('test',$(this).toggleClass('selected'));
});
if(localStorage.getItem('test')){
$(this).toggleClass('selected');
}
});
HTML:
<div id="box" class="p001 mix">Div 1</div>
<div id="box" class="p002 mix">Div 2</div>
Thanks in advance.
You need to uniquely identify each div element, here in example I have used data-* prefixed custom attributes. On page load you need to iterate the objects and target the elements on which the value of key is set to true
HTML
<div data-id="1" class="p001 mix">Div 1</div>
<div data-id="2" class="p002 mix">Div 2</div>
Script
$(function() {
$('.mix').click(function() {
$(this).toggleClass('selected');
var lsid = 'test' + this.dataset.id;
window.localStorage.setItem(lsid, $(this).hasClass('selected'));
});
$('.mix').each(function() {
var lsid = 'test' + this.dataset.id;
if (localStorage.getItem(lsid) && localStorage.getItem(lsid) == "true") {
$(this).addClass('selected');
}
})
});
Fiddle
Note: Identifiers in HTML must be unique, thus removed id="box" and used CSS based on class

show/hide dymamic div on click with jquery

This is scenario, I have a php Script that display dynamic data from database. The Number of records fetched from the query can be different from day to day so it is very dynamic.
This is Div Content 1<br>
<div id='content1' class='more'>contents 1</div>
This is Div Content 2<br>
<div id='content2' class='more'>contents 2</div>
This is Div Content 3<br>
<div id='content3' class='more'>contents 3</div>
$("#link1").on('click', function(){
$("#content1").slideToggle();
return false;
});
$("#link2").on('click', function(){
$("#content2").slideToggle();
return false;
});
$("#link3").on('click', function(){
$("#content3").slideToggle();
return false;
});
This is how im doing it now but this is not dynamic. If the number of records would 4 for class showhide. the 4th link will not work.
id: link1,link2,link3 and content1,2,3 are geranted from the php loop and it will unique.
JsFiddle Showing a Sample
// jQuery 1.4.3+
$('body').delegate( '.showhide', 'click', function(e){
$(this).next('.more').slideToggle();
return false;
});
// jQuery 1.7+
$( 'body' ).on( 'click', '.showhide', function(e){
$(this).next('.more').slideToggle();
return false;
});
read about event delegation
There are probably cleaner ways to implement this, but you have all the information you need in the bound function.
$('a.showhide').on('click', function(){
$('#content'+this.id.slice(-1)).slideToggle();
});
Here you go http://jsfiddle.net/devm33/ysBR6/
You can use data-* attributes
HTML
<a href="#" class="showhide" data-toggle="slide" data-target="slide1">
This is Div Content 3
</a>
<br>
<div class='more' data-more="slide1">contents 3</div>
JavaScript
$('.showhide[data-toggle="slide"]').on('click', function()
{
$('.more[data-more="' + $(this).data('target') + '"]').slideToggle();
return false;
});

JQuery does not hide div if p element is before it?

I am trying to make use of a JQuery snippet to hide some content on SharePoint. It works without the <p> element, but SharePoint has a lot of stuff in between the div so I think that's why it's not working.
JQuery:
jQuery(document).ready(function() {
jQuery(".ms-wpcontentdivspace").hide();
//toggle the componenet with class msg_body
jQuery(".ms-webpart-chrome-title").click(function(e)
{
e.preventDefault();
jQuery(this).next("div.ms-wpcontentdivspace").slideToggle(200);
});
});
Here's the working code:
<div class="ms-webpart-chrome-title"><h2><span>Hello</span> </h2></div>
<div class="ms-wpcontentdivspace">Hi there. I am hidden</div>
<div class="ms-webpart-chrome-title"><h2>Another title</h2></div>
<div class="ms-wpcontentdivspace">More hidden stuff</div>
Here's the code that doesn't:
<div class="ms-webpart-chrome-title"><h2><span>Hello</span></h2></div>
<p>some text</p>
<div class="ms-wpcontentdivspace">Hi there. I am hidden</div>
<div class="ms-webpart-chrome-title"><h2>Another title</h2></div>
<div class="ms-wpcontentdivspace">More hidden stuff</div>
Here's a Jsfiddle. Thanks!
The jQuery version used 1.3.x is pretty old, anyway try
jQuery(document).ready(function () {
jQuery(".ms-wpcontentdivspace").hide();
//toggle the componenet with class msg_body
jQuery(".ms-webpart-chrome-title").click(function (e) {
e.preventDefault();
jQuery(this).nextAll("div.ms-wpcontentdivspace").eq(0).slideToggle(200);
});
});
Demo: Fiddle
$.next() only gets the immediately following sibling, so you will want to use $.nextAll()
jQuery(document).ready(function() {
jQuery(".ms-wpcontentdivspace").hide();
//toggle the componenet with class msg_body
jQuery(".ms-webpart-chrome-title").click(function(e)
{
e.preventDefault();
jQuery(this).nextAll("div.ms-wpcontentdivspace").eq(0).slideToggle(200);
});
});

JQuery Remove all links inside a <div> that have a particular class except for the one that's clicked

In jQuery, how can I remove/disable or change the class of all links inside a <div> that have a particular class except for the one that was clicked? The clicked one's class needs to be changed.
<div class="test">
<div class="link" data-id="1">Link 1</div>
<div class="link" data-id="2">Link 2</div>
<div class="link" data-id="3">Link 3</div>
</div>
In this case, if I clicked Link 1, I'm trying to make Link 2 and Link 3 disappear or change their class, and change the class of Link 1 to noLink.
How can this be done. I'm familiar with add class, remove class, but I'm stuck with getting all others to be removed or changed and change the clicked one to another class.
Something like this?
$('.test div').on('click', function () {
$(this).removeClass('link')
.addClass('noLink')
.siblings('.link')
.remove();
});
DEMO
If you want to change color of clicked link then you can use following code
$('.test .link').on('click',function(){
$('.test .link').css('background', '#38a2de');
$(this).css('background', '#333333');
});
demo
$('.link').on('click', function() {
$('.link').addClass('hide');
$(this).attr('class', 'no-link');
});
Fiddle: http://jsfiddle.net/R3586/
$('.test .link').click(function() {
$(this).removeClass('link').addClass('noLink');
$('.link').remove();
})
This does the trick:
<script>
$('.test .link').click(function(){
$('.test .link').hide();
$(this).addClass('noLink').show();
});
</script>
$('.link').click(function(){
$(this).addClass('noLink').removeClass('link').siblings().hide();
});
$('.link').click(function(){
$(this).removeClass('link').addClass('nolink');
$('.link').remove()
});

Toggle a div to be closed on load?

The following function toggles a div when clicked on the relative id. Any way to set it up so that when the page loads, the div being toggled starts out closed?
I dont want them to be seen until clicked on.
Best,
Joey
<script type="text/javascript">
$(document).ready(function() {
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
Just hide them on dom ready, like this:
<script type="text/javascript">
$(document).ready(function() {
$(".exclusive-architects, .exclusive-international,
.exclusive-designers, .exclusive-historical").hide();
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
You should just need to add a display:none to your starting CSS
DEMO
if your HTML looks like this:
<div id="buttons">
<div>toggle architects</div>
<div>toggle international</div>
<div>toggle designers</div>
<div>toggle historical</div>
</div>
<div class="cont"> architects content </div>
<div class="cont"> international content </div>
<div class="cont"> designers content </div>
<div class="cont"> historical content </div>
Than all you need is:
$('.cont').hide(); // HIDE ALL INITIALLY
$('#buttons div').click(function(){
$('.cont').eq( $(this).index() ).toggle();
});
$(function(){ // DOM ready
$(".exclusive-architects").hide();
$(".exclusive-international").hide();
$(".exclusive-designers").hide();
$(".exclusive-historical").hide();
});
it should work :)

Categories

Resources