I am trying to figure why the nav links wont open the accordion. I am sure there is just some jquery that is not in proper syntax. I changed the selectors in the jquery code and now it wont work.
Im sure to a trained eye this should be a quick fix.
Can anyone help?
////////////////////////////
// http://www.adipalaz.com/experiments/jquery/accordion.html
///////////////////////////
(function($) {
//http://www.mail-archive.com/jquery-en#googlegroups.com/msg43851.html
$.fn.orphans = function(){
var txt = [];
this.each(function(){$.each(this.childNodes, function() {
if (this.nodeType == 3 && $.trim(this.nodeValue)) txt.push(this)
})});
return $(txt);
};
//http://www.learningjquery.com/2008/02/simple-effects-plugins:
$.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
$.fn.slideFadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};
})(jQuery);
////////////////////////////
$(function() {
$('.collapse').hide();
$('.expand').orphans().wrap('');
//demo 4 - div.demo:eq(3) - queued slide effects:
$('div.demo .expand').click(function() {
var $thisCllps = $(this).next('.collapse');
var $cllpsVisible = $(this).ul('.expand').next('.collapse:visible');
($cllpsVisible.length) ? $(this).toggleClass('open').siblings('.expand').removeClass('open')
.next('.collapse:visible').slideUp(400, function() {
$thisCllps.slideDown();
}) : $thisCllps.slideToggle().prev('.expand').toggleClass('open');
return false;
});
});
<div class="demo">
<ul class="collapse" class="ul" style="display: none; ">
<li>Item 1.1.</li>
<li>Item 1.2.</li>
</ul>
<ul class="collapse" class="ul" style="display: none; ">
<li>Item 2.1.</li>
<li>Item 2.2.</li>
</ul>
<ul class="collapse" class="ul" style="display: none; ">
<li>Item 3.1.</li>
<li>Item 3.2.</li>
</ul>
</div>
<ul>
<li>
<h4 class="expand">Slide Up/Down UL 1</h4>
</li>
<li>
<h4 class="expand">Slide Up/Down UL 2</h4>
</li>
<li>
<h4 class="expand">Slide Up/Down UL 3</h4>
</li>
</ul>
Why not just use the Jquery accordion function?
http://docs.jquery.com/UI/Accordion
Related
I am working on tab
There are 5 tabs
About Us
Our Work
Our Team
News & Events
Contact us
and inside each of them there are content and links, images.
What i am trying to achieve here whenever i click the link inside the tab Our Team content,
It should open the Contact us Tab content.
Here is the code i am using currently, It has some custom js and jquery 2.2.0 used.
Please check the code, i haven't put css here.
The live link of this example is Live Demo
Please help me
// TABS
var tabs = $('.container_tabs');
$('.tabs-content > div', tabs).each(function (i) {
if (i != 0) $(this).hide(0);
});
tabs.on('click', '.tabs a', function (e) {
e.preventDefault();
var tabId = $(this).attr('href');
$('.tabs a', tabs).removeClass();
$(this).addClass('active');
$('.tabs-content > div', tabs).hide(0);
$(tabId).show();
});
// var tabs1 = $('.container_tabs1');
// $('.tabs-content > div', tabs1).each(function (i) {
// if (i != 0) $(this).hide(0);
// });
// tabs1.on('click', '.tabs a', function (e) {
//
// e.preventDefault();
//
// var tabId = $(this).attr('href');
//
//
// $('.tabs a', tabs1).removeClass();
// $(this).addClass('active');
//
// $('.tabs-content > div', tabs1).hide(0);
// $(tabId).show();
//
// });
(function ($) {
jQuery.fn.lightTabs = function (options) {
var createTabs = function () {
tabs = this;
i = 0;
showPage = function (tabs, i) {
$(tabs).children("div").children("div").hide();
$(tabs).children("div").children("div").eq(i).show();
$(tabs).children("ul").children("li").removeClass("active");
$(tabs).children("ul").children("li").eq(i).addClass("active");
};
showPage(tabs, 0);
$(tabs).children("ul").children("li").each(function (index, element) {
$(element).attr("data-page", i);
i++;
});
$(tabs).children("ul").children("li").click(function () {
showPage($(this).parent().parent(), parseInt($(this).attr("data-page")));
});
};
return this.each(createTabs);
};
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs cw-wrapper">
<ul class="cw-30">
<li class="" data-page="0">About Us</li>
<li data-page="1">Our Work</li>
<li data-page="2">Our Team</li>
<li data-page="3">Our Partners</li>
<li data-page="4" class="active">Work With Us</li>
<li data-page="5">Contact us</li>
</ul>
<div class="cw-70">
<div class="content" style="display: none;">
Content 1
</div>
<div class="content" style="display: none;">
Content 2
</div>
<div class="content" style="display: none;">
Content 3
</div>
<div class="content" style="display: none;">
Content 4
</div>
<div class="content" style="display: none;">
<h3>Contact us Content</h3>
</div>
</div>
</div>
If I understand you correctly, you want to be able to switch tabs by links that are inside your tab contents too. In that case you should create a function for switching tabs, instead of a click event in you menu. here is an example:
edit #1:
I removed all onclicks and bind switchTab function to all elements that have switch-tab class.
edit #2:
As requested, you can pass initial tab number from url ?tab=x codepen
// set tab from url
// sample url: http://mywebsite.com/my-route?tab=2
$(document).ready(function() {
var url = new URL(window.location.href);
var tabNumber = url.searchParams.get('tab');
if (tabNumber)
switchTab(tabNumber);
});
// change tab by clicking an element with "switch-tab" class
$('.switch-tab').on('click', function(e) {
var tabNumber = e.target.getAttribute('data-tab');
switchTab(tabNumber);
});
// change tab by passing tab number
function switchTab(tabNumber) {
$('#tabs li').removeClass('active');
$('#tabs li[data-tab=' + tabNumber + ']').addClass('active');
$('.content').css('display', 'none');
$('.content[data-content=' + tabNumber + ']').css('display', 'block');
}
<style>
#tabs li.active {
font-weight: bold;
}
.content {
display: none;
}
.content.visible {
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs cw-wrapper">
<ul class="cw-30" id="tabs">
<li data-tab="0" class="switch-tab">About Us</li>
<li data-tab="1" class="switch-tab">Our Work</li>
<li data-tab="2" class="switch-tab">Our Team</li>
<li data-tab="3" class="switch-tab">Our Partners</li>
<li data-tab="4" class="switch-tab active">Work With Us</li>
<li data-tab="5" class="switch-tab">Contact us</li>
</ul>
<div class="cw-70">
<div class="content" data-content="1">
<p>Content 1</p>
</div>
<div class="content" data-content="2">
<p>Content 2</p>
</div>
<div class="content" data-content="3">
<p>Content 3</p>
</div>
<div class="content visible" data-content="4">
<p>Content 4</p>
go to contact us
</div>
<div class="content" data-content="5">
<h3>Contact us Content</h3>
</div>
</div>
</div>
How can I compress my jQuery useful? I want to add a function to show an element when I hover another one. The function below is exactly what I want, but I want it more dynamic. Maybe with an data attribute?
var item_first = $('.item_first');
var item_second = $('.item_second');
var item_third = $('.item_third');
var item_fourth = $('.item_fourth');
var image_first = $('.image_first');
var image_second = $('.image_second');
var image_third = $('.image_third');
var image_fourth = $('.image_fourth');
$(document).ready(function () {
item_first.hover(function () {
image_first.addClass('active');
}, function () {
image_first.removeClass('active');
});
item_second.hover(function () {
image_second.addClass('active');
}, function () {
image_second.removeClass('active');
});
item_third.hover(function () {
image_third.addClass('active');
}, function () {
image_third.removeClass('active');
});
item_fourth.hover(function () {
image_fourth.addClass('active');
}, function () {
image_fourth.removeClass('active');
});
});
https://jsfiddle.net/gt5kw00q/
Sorry for my bad English. I try to write so that you understand it.
I would write the code like below.
$('img') will select all your images and apply the code to them on hover.
$('img').hover(function(){
$(this).addClass('active');
},function(){
$(this).removeClass('active');
});
Based on your fiddle, try this approach
$( ".left__item" ).hover( function(){
$(".right__image").eq( $(this).index() ).addClass( "active" );
}, function(){
$(".right__image").eq( $(this).index() ).removeClass( "active" );
})
Demo
$(document).ready(function() {
$(".left__item").hover(function() {
$(".right__image").eq($(this).index()).addClass("active");
}, function() {
$(".right__image").eq($(this).index()).removeClass("active");
})
});
.right__image {
display: none;
}
.right__image.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<ul class="left__inner">
<li class="left__item item_first active">
Werte
</li>
<li class="left__item item_second">
Team
</li>
<li class="left__item item_third">
Arbeitsweise
</li>
<li class="left__item item_fourth">
Standort
</li>
</ul>
</div>
<div class="right">
<div class="right__inner">
<div class="right__image image_first">
IMAGE 1 HERE
</div>
<div class="right__image image_second">
IMAGE 2 HERE
</div>
<div class="right__image image_third">
IMAGE 3 HERE
</div>
<div class="right__image image_fourth">
IMAGE 4 HERE
</div>
</div>
</div>
Give your elements a class name and a data attribute with the target(id):
<div class="myHoverElement" id="ele1" data-targetid="image_1"></div>
<div class="myHoverElement" id="ele2" data-targetid="image_2"></div>
<img id="image_1">
<img id="image_2">
You can then bind a hover event to all those elements at once:
$('.myHoverElement').hover(
function() { $('#' + $(this).data('targetid')).addClass('active') },
function() { $('#' + $(this).data('targetid')).removeClass('active') }
);
$(this) is a reference to the currently hovered element.
Please find working solution below, enjoy :)
var items = {
item_first: 'image_first',
item_second: 'image_second',
item_third: 'image_third',
item_fourth: 'image_fourth'
}
$(document).ready(function() {
function addClass(key) {
$('.' + items[key]).addClass('active');
}
function removeClass(key) {
$('.' + items[key]).removeClass('active');
}
for (var key in items) {
$('.' + key).hover(addClass.bind(null, key), removeClass.bind(null, key))
}
});
.right__image {
display: none;
}
.right__image.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<ul class="left__inner">
<li class="left__item item_first active">
Werte
</li>
<li class="left__item item_second">
Team
</li>
<li class="left__item item_third">
Arbeitsweise
</li>
<li class="left__item item_fourth">
Standort
</li>
</ul>
</div>
<div class="right">
<div class="right__inner">
<div class="right__image image_first active">
IMAGE 1 HERE
</div>
<div class="right__image image_second">
IMAGE 2 HERE
</div>
<div class="right__image image_third">
IMAGE 3 HERE
</div>
<div class="right__image image_fourth">
IMAGE 4 HERE
</div>
</div>
</div>
Im trying to learn javascript mostly by trial and error, i have created a dropdown menu which probably has ALOT of unnessecary code in it.. How do i create this the right way? any pointer would be appreciated!
JS:
function dropdown() {
var dropdownTrigger = document.getElementById("dd");
var dropdownTrigger2 = document.getElementById("dd2");
var dropdownTrigger3 = document.getElementById("dd3");
var dropdownTrigger4 = document.getElementById("dd4");
if (dropdownTrigger.style.display == "none") {
dropdownTrigger.style.display="block";
dropdownTrigger2.style.display="none";
dropdownTrigger3.style.display="none";
dropdownTrigger4.style.display="none";
}
else {
dropdownTrigger.style.display="none";
}
}
function dropdown2() {
var dropdownTrigger = document.getElementById("dd");
var dropdownTrigger2 = document.getElementById("dd2");
var dropdownTrigger3 = document.getElementById("dd3");
var dropdownTrigger4 = document.getElementById("dd4");
if (dropdownTrigger2.style.display == "none") {
dropdownTrigger.style.display="none";
dropdownTrigger2.style.display="block";
dropdownTrigger3.style.display="none";
dropdownTrigger4.style.display="none";
}
else {
dropdownTrigger2.style.display="none";
}
}
function dropdown3() {
var dropdownTrigger = document.getElementById("dd");
var dropdownTrigger2 = document.getElementById("dd2");
var dropdownTrigger3 = document.getElementById("dd3");
var dropdownTrigger4 = document.getElementById("dd4");
if (dropdownTrigger3.style.display == "none") {
dropdownTrigger.style.display="none";
dropdownTrigger2.style.display="none";
dropdownTrigger3.style.display="block";
dropdownTrigger4.style.display="none";
}
else {
dropdownTrigger3.style.display="none";
}
}
function dropdown4() {
var dropdownTrigger = document.getElementById("dd");
var dropdownTrigger2 = document.getElementById("dd2");
var dropdownTrigger3 = document.getElementById("dd3");
var dropdownTrigger4 = document.getElementById("dd4");
if (dropdownTrigger4.style.display == "none") {
dropdownTrigger.style.display="none";
dropdownTrigger2.style.display="none";
dropdownTrigger3.style.display="none";
dropdownTrigger4.style.display="block";
}
else {
dropdownTrigger4.style.display="none";
}
}
function dropdownAll() {
var ddaText = document.getElementById("dda");
var dropdownTrigger1 = document.getElementById("dd");
var dropdownTrigger2 = document.getElementById("dd2");
var dropdownTrigger3 = document.getElementById("dd3");
var dropdownTrigger4 = document.getElementById("dd4");
if (ddaText.innerHTML == "Open all"){
ddaText.innerHTML = "Hide all";
dropdownTrigger1.style.display="block";
dropdownTrigger2.style.display="block";
dropdownTrigger3.style.display="block";
dropdownTrigger4.style.display="block";
}
else {
ddaText.innerHTML = "Open all";
dropdownTrigger1.style.display="none";
dropdownTrigger2.style.display="none";
dropdownTrigger3.style.display="none";
dropdownTrigger4.style.display="none";
}
}
HTML:
<div class="left-menu">
<p>Menu</p>
<br>
+Menu 1
<ul id="dd" style="display:none;">
<li>item 1:1</li>
<li>item 1:2</li>
<li>item 1:3</li>
<li>item 1:4</li>
</ul>
+Menu 2
<ul id="dd2" class="dropdown" style="display:none;">
<li>item 2:1</li>
<li>item 2:2</li>
<li>item 2:3</li>
<li>item 2:4</li>
</ul>
+Menu 3
<ul id="dd3" class="dropdown" style="display:none;">
<li>item 3:1</li>
<li>item 3:2</li>
<li>item 3:3</li>
<li>item 3:4</li>
</ul>
+Menu 4
<ul id="dd4" class="dropdown" style="display:none;">
<li>item 4:1</li>
<li>item 4:2</li>
<li>item 4:3</li>
<li>item 4:4</li>
</ul>
Open all
</div>
is it possible to create function that increases or some kind of loop for this?
Maybe consider something along the lines of this. This function uses a ternary operator to check if the display value is set to block or none, and switches it accordingly.
<button href="#" onclick="toggleDisplay(document.getElementById('dd'))"> +Menu 1</button>
<ul id="dd" style="display:none;">
<li>item 1:1</li>
<li>item 1:2</li>
<li>item 1:3</li>
<li>item 1:4</li>
</ul>
<script>
function toggleDisplay(el){
el.style.display === 'none' ? // Is it invisible?
el.style.display = 'block' : // Then use this
el.style.display = 'none' // If not the use this
}
</script>
Edit: Misread; don't use a <select> element.
And I will actually better explain what is happening here. The function toggleDisplay(el) takes an element as a parameter.
<button onclick=toggleDisplay( <your element goes here> )>
Now the element that we are passing has a style object that we can access and make changes to. You can reference that here w3school.
Edit 2: Here's another solution that attaches an event to elements in an HTML class list. The events toggle the current element's direct sibling element. You can use this with any number of different combinations that you might need it for. This way you won't need any inline JavaScript in your HTML and you won't have to insert each element individually.
Myself and most other people would recommend trying out jQuery for this kind of DOM traversing and event handling. The DOM is absolutely terrible in terms of browser compatibility and the headache involved with traversal. jQuery solves a lot of that headache.
// this returns a list of your buttons with the class name 'toggle-button'
var buttons = document.getElementsByClassName('toggle-button')
// here we iterate over them to individually modify
for (var i = 0; i <= buttons.length-1; i++){
// here we take the current button and we add an event listener to it
buttons[i].addEventListener('click', function(){
// 'this' refers to buttons[i] that we are targeting with our event
var el = this.nextElementSibling // nextElementSibling is the ul
el.style.display === 'none' ? // Is it invisible?
el.style.display = 'block' : // Then use this
el.style.display = 'none' // If not then use this
})
}
<button class="toggle-button"> +Menu 1</button>
<ul id="dd0" style="display:none;">
<li>item 1:1</li>
<li>item 1:2</li>
<li>item 1:3</li>
<li>item 1:4</li>
</ul>
<button class="toggle-button"> +Menu 1</button>
<ul id="dd1" style="display:none;">
<li>item 2:1</li>
<li>item 2:2</li>
<li>item 2:3</li>
<li>item 2:4</li>
</ul>
<button class="toggle-button"> +Menu 1</button>
<ul id="dd2" style="display:none;">
<li>item 3:1</li>
<li>item 3:2</li>
<li>item 3:3</li>
<li>item 3:4</li>
</ul>
You could use JQuery,
<a class="menu1" href="#"> +Menu 1</a>
<ul id="dd" style="display:none;">
<li>item 1:1</li>
<li>item 1:2</li>
<li>item 1:3</li>
<li>item 1:4</li>
</ul>
<a class="menu2" href="#"> +Menu 2</a>
<ul id="dd2" style="display:none;">
<li>item 2:1</li>
<li>item 2:2</li>
<li>item 2:3</li>
<li>item 2:4</li>
</ul>
And here's the JQuery code:
$(document).ready(function() {
$(".menu1").toggle(function() {
function() {$("#dd").css("display", "block");},
function() {$("#dd").css("display", "none");}
});
$(".menu2").toggle(function() {
function() {$("#dd2").css("display", "block");},
function() {$("#dd2").css("display", "none");}
});
});
A CSS only solution to your current problem
The problem your are currently trying to solve can be achieved without the use of javascript at all, and would most likely be a cleaner and more scalable solution in the end.
The theory:
We use a div which wraps the menu elements, and whenever this is hovered (the :hover property), we show the menu. We can even add a nice little animation to this if we care.
<style>
div.menuopener{
display: block;
}
ul.submenu {
/*display: none; USE THIS IN STEAD TO LOOK LIKE YOUR EXAMPLE*/
/* All of this is to make it look nice, and is not needed: */
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
}
/*Here we select all elements of class menuopener when it is hovered, and then
select the sub element ul of class submenu and apply styles to it */
.menuopener:hover ul.submenu{
/*display: block; USE THIS IN STEAD TO LOOK LIKE YOUR EXAMPLE*/
/* max-height is just for the transition, and not needed*/
max-height: 200px;
}
</style>
<div class="menuopener">
<p>Menu 1</p>
<ul class="submenu" >
<li>item 1:1</li>
<li>item 1:2</li>
<li>item 1:3</li>
<li>item 1:4</li>
</ul>
</div>
<div class="menuopener">
<p>Menu 2</p>
<ul class="submenu">
<li>item 2:1</li>
<li>item 2:2</li>
<li>item 2:3</li>
<li>item 2:4</li>
</ul>
</div>
<div class="menuopener">
<p>Menu 3</p>
<ul class="submenu">
<li>item 3:1</li>
<li>item 3:2</li>
<li>item 3:3</li>
<li>item 3:4</li>
</ul>
</div>
<div class="menuopener">
<p>Menu 4</p>
<ul class="submenu">
<li>item 4:1</li>
<li>item 4:2</li>
<li>item 4:3</li>
<li>item 4:4</li>
</ul>
</div>
Hope this helps a bit. It might not be the perfect solution, but it should clean up your current situation and provide a much smaller, and easier to maintain, codebase.
I do understand that what you are after is to learn javascript, but there are other, more fun, opportunities to do this other than opening menus, like https://projecteuler.net/ or https://www.codingame.com/
I'm having difficulty disabling sorting on a specific li in my ul.
I'm using SortableJS.
<ul id="items">
<li class="static">
<div class="image"><img src="image.jpg" /></div>
<div class="text">Static</div>
<div class="clearboth"></div>
</li>
<li>
<div class="image"><img src="image.jpg" /></div>
<div class="text">Dynamic</div>
<div class="clearboth"></div>
</li>
<li>
<div class="image"><img src="image.jpg" /></div>
<div class="text">Dynamic</div>
<div class="clearboth"></div>
</li>
</ul>
One li with class static should NOT be sortable. The others should be sortable.
var el = document.getElementById('items');
var sortable = new Sortable(el, {
onUpdate: function (evt) {
var itemEl = evt.item;
// here happens some stuff
},
filter: '.js-remove',
onFilter: function (evt) {
// here happens some stuff
}
});
I know you can do it in jQuery UI sortable like this:
$( ".sortable" ).sortable({
cancel: ".static"
});
How can I do this in SortableJS?
Further to #BenG comment, you need to use filter instead of cancel.
var el = document.getElementById('items');
var sortable = Sortable.create(el, {
filter: ".static"
});
<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
<link href="http://rubaxa.github.io/Sortable/st/app.css" rel="stylesheet" />
<ul id="items" class="block__list block__list_words">
<li>item 1</li>
<li class="static">item 2</li>
<li>item 3</li>
</ul>
As Bob Stein mentionend in the comments:
You need to add both:
the filter: 'selector' property
the onMove: function (e) { return e.related.className.indexOf('static') === -1; } callback listener function
to completely prevent an element from being rearranged at the beginning or end of a list.
Working with multiple sortable instances:
If you have multiple lists, from which you can exchange elements, you would add the same code to the sortable instances. This is because a dragged element from another sortable instance does not call the callback functions of the sortable instance to be added, but those of its source sortable instance. See this example below:
var el = document.getElementById('items');
var sortable = Sortable.create(el, {
filter: ".static",
group: {
name: 'list'
},
onMove(e) {
return e.related.className.indexOf('static') === -1;
}
});
var items2 = document.getElementById('items2');
var sortable = Sortable.create(items2, {
filter: ".static",
group: {
name: 'list'
},
onMove(e) {
return e.related.className.indexOf('static') === -1;
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
<link href="http://rubaxa.github.io/Sortable/st/app.css" rel="stylesheet" />
<ul id="items" class="block__list block__list_words">
<li class="static">FRUITS</li>
<li>Strawberry</li>
<li>Banana</li>
<li>Peach</li>
</ul><ul id="items2" class="block__list block__list_words">
<li class="static">COMPANIES</li>
<li>Microsoft</li>
<li>Apple</li>
<li>Intel</li>
</ul>
iI need some help with this one.
HTML
<div class="sidebar">
<ul>
<li>
<a href="{{URL::to('artworks')}}" class="action-link discover">
<span class="action-icon discover-icon"></span>
<span class="action-label">Discover</span></a>
</li>
<li>
<a class="action-link viewlist disabled showlink">
<span class="action-icon collection-icon"></span>
<span class="action-label">ViewList</span></a>
</li>
<li>
<a class="action-link filters showlink">
<span class="action-icon filter-icon"></span>
<span class="action-label">Filters</span></a>
</li>
<li>
<a class="action-link share showlink">
<span class="action-icon share-icon"></span>
<span class="action-label">Share</span></a>
</li>
</ul>
<div class="sidebar-content">
<div class="watchlist-content">
<h2>Watchlist</h2>
<ul>
<li class="facebook"><span class="icon"></span></li>
<li class="twitter"><span class="icon"></span></li>
<li class="pinterest"><span class="icon"></span></li>
<li class="google"><span class="icon"></span></li>
</ul>
</div>
<div class="share-content">
<h2>Share</h2>
<ul>
<li class="facebook"><span class="icon"></span>Facebook</li>
<li class="twitter"><span class="icon"></span>Twitter</li>
<li class="pinterest"><span class="icon"></span>Pinterest</li>
<li class="google"><span class="icon"></span>Google+</li>
</ul>
</div>
<div class="filters-content">
<h2>Filters</h2>
<ul class="core">
<li class="cat-icon"><span class="icon"></span>Categories</li>
<li class="artists-icon"><span class="icon"></span>Artists</li>
<li class="style-icon"><a><span class="icon"></span>Styles</a></li>
</ul>
</div>
</div>
And my poorly written Jquery
$('.filters').toggle(
function(){
if($('.share-content').is(':visible'))
{
$('.share-content').hide();
$('.filters-content').show();
}
else{
$('.filters-content').css({'display': 'block'}, {queue:false});
$('.sidebar').stop().animate({left:'255px'}, {duration: 300, queue:false});
$('.content-with-list').children().stop().animate({'margin-left':'255px'}, {duration: 300, queue:false});
}
},
function()
{
$('.sidebar').stop().animate({left:'0'}, {duration: 300, queue:false});
$('.content-with-list').children().stop().animate({'margin-left':'0'}, {duration: 300, queue:false});
});
$('.share').toggle(
function()
{
if($('.filters-content').is(':visible'))
{
$('.filters-content').hide();
$('.share-content').show();
}
else{
$('.share-content').css({'display': 'block'}, {queue:false});
$('.sidebar').stop().animate({left:'255px'}, {duration: 300, queue:false});
$('.content-with-list').children().stop().animate({'margin-left':'255px'}, {duration: 300, queue:false});
}
},
function()
{
$('.sidebar').stop().animate({left:'0'}, {duration: 300, queue:false});
$('.content-with-list').children().stop().animate({'margin-left':'0'}, {duration: 300, queue:false});
});
So even though the code looks terrible it was working for two blocks but now I need to add third one and I'm stuck on this one.I would really like to know how can I make code with little repetitions and make my sidebar open only once shift between content and then close the sidebar if the same link was clicked.
Thank you for your patience in advance.
jsBin demo
$('.sidebar li').click(function() {
var el = $('.sidebar-content > div').eq( $(this).index() );
check = el.is(':visible') ? el.hide() : ($('.sidebar-content > div').hide()) (el.show());
});