We Keep Coding

Toggle div, if already open then hide

I'm trying to build a toggling panel that once opened, if the active element is clicked again it closes yet if the sibling element is click the content is updated only I'm having mixed results. Can anybody see where im going wrong?
https://jsfiddle.net/9b3mecc2/
$('.sectors-list li').on('click', function(e){
e.preventDefault();
var order = $(this).index();
$('.sub-sectors div').hide();
$('.sub-sectors div').eq(order).show();
if($('.digital-sectors').is(':visible')
&& order === 0){
$('.sub-sectors').removeClass('active');
} else {
$('.sub-sectors').addClass('active');
}
});

What you try to do is not complicated, just that your code is missing references from the event element to the element to show, so you can do with css, using the pseudo-selector : target
Check documentation :target
Browser support list
div{ display: none; }
div:target{ display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href='#data-foo'>foo</a></li>
<li><a href='#data-bar'>bar</a></li>
</ul>
<div id='data-foo'>data foo</div>
<div id='data-bar'>data bar</div>

I think this will works.
$('.sectors-list li').on('click', function(e){
e.preventDefault();
var order = $(this).index();
$('.sub-sectors div').hide();
// $('.sub-sectors div').eq(order).show(); //moving this line to eles part
if($('.digital-sectors').is(':visible')
&& order === 0){
$('.sub-sectors').removeClass('active');
} else {
$('.sub-sectors').addClass('active');
$('.sub-sectors div').eq(order).show();
}
});

RemoveClass and AddClass not working

I think this may be because these elements didn't originally have the DOM element. I have tried using events and then a propagation tool, but it's still not working :(
I want it so that when you click one of the items, it removes the underline from all items, and then adds it to the item that you just clicked, but in this case it keeps it underlined. To test just use the fiddle link and click on the first "A", and then the second bigger "A"
(JSFiddle)
$(document).ready(function() {
$("li.big").on("click", function(e) {
$("li>a.underline").removeClass("underline");
$("li.big").addClass("underline");
e.stopPropagation();
});
$("li.default").on("click", function(e) {
$("li>a.underline").removeClass("underline");
$("li.default").addClass("underline");
e.stopPropagation();
});
});
a {
text-decoration: none;
}
.underline {
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li>
<div class="raisetext">Raise Text:</div>
</li>
<li class="default">A
</li>
<li class="big">A
</li>
<li class="bigger">A
</li>
</ul>

To add to Sushils answer, it sounded like the anchors were appended. So, just in case the anchor tags were dynamically appended to the page:
$(document).ready(function() {
$("li").on("click","a", function() {
$("li > a").removeClass("underline");
$(this).addClass("underline");
});
});

you can simply use $('a').on('click', function(){ instead of the li.big and li.default since they're all links.
try this
$(document).ready(function() {
$('a').on('click', function(){
$('a').removeClass('underline');
$(this).addClass('underline');
});
});
here's a working JSFIDDLE
note: this will apply to all the links on the page. if you don't wan't it to apply to all the links, then you can use a class.

jQuery selector bug

HTML:
<div id="accordion">
<div class="top">
Show all | Hide all
</div>
<div class="body">
<div class="item">
item1
<div class="content">
<p>
Item1 content;
</p>
Back to top
</div>
</div>
<div class="item">
Item2
<div class="content">
<ul>
<li>item2 content;</li>
<li style="list-style: none">Back to top</li>
</ul>
</div>
</div>
</div>
</div>
JS:
$("#accordion .content").slideUp();
$("#accordion .item a.head").click(function (e) {
//open tab when click on item
e.preventDefault();
$(this).toggleClass('active');
$(this).next().stop().slideToggle();
if ($(this).hasClass('active')) {
$(this).attr('title', 'hide');
} else {
$(this).attr('title', 'show');
}
});
$("#accordion .showAll").click(function (e) {
//open all tab
e.preventDefault();
$("#accordion .item a").each(function () {
if (!$(this).hasClass('active')) {
$(this).click();
}
});
});
$("#accordion .hideAll").click(function (e) {
//hide all tab
e.preventDefault();
$("#accordion .item a").each(function () {
if ($(this).hasClass('active')) {
$(this).click();
}
});
});
$(".backToTop").click(function (e) {
//scroll to top
e.preventDefault();
$('body, html').animate({
scrollTop: 0
}, 450);
});
basically it's an accordion, a very simple one done in jquery
JSfiddle here:
http://jsfiddle.net/PqaXZ/6/
(note*: you have to scroll down to see the example)
Anyone can explain why I click "Show All" button, it trigger a click on "Back to top" button?
I don't see anything can possibly cause it in the code
Thanks a lot in advance

Well, in your "show all" click handler, you're clicking all "inactive" links in the accordion:
$("#accordion .item a").each(function () {
if (!$(this).hasClass('active')) {
$(this).click();
}
});
If at least one of the "back to top" links anywhere in the accordion doesn't have the class "active", you're triggering its click event.

Because you're triggering a click on it.
$("#accordion .item a") includes the "show all" button, then you promptly $(this).click(); which simulates a user clicking on that link. Hence, sending them back to top.

Because you are using spaces inside your selector, it is 'clicking' on any a under any .item that is under the #accordion, which includes your 'back to the top' button. If you instead make your selector: #accordion .item>a, then it will only 'click' on as that are immediate children of .items.

#accordion .item a is triggering all the links inside .item you should use
#accordion .item > a
to trigger al the first links but not the childs

One page website, show/hide divs, menu button will not stay selected

I'm trying to make a one page website with a menu (pictures, css roll over...), that will display a different div when each menu button is clicked. Only one div will be shown at time though and if one is already open it should be hidden. This is working well.
The problem I am having is that that the menu button which shows the result will not stay selected i.e. on the same picture as the roll over (hover).
HTML :
<ul class="menu">
<li class="home"><span class="displace"></span></li>
<li class="credits"><span class="displace"></span></li>
<li class="idea"><span class="displace"></span></li>
</ul>
<div id="content1">home text</div>
<div id="content2">credits text1</div>
<div id="content3">idea text</div>​
JS / jQuery :
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
$(function stay() {
$('menu').click(function stay() {
$('menu').removeClass('selected');
$(this).addClass('selected');
});
});
​
Demo: http://jsfiddle.net/anKT3/159/
I've tried creating a function to change the class, but I've not had any luck.

Change your stay() function to be as follows:
$(function stay() {
$('.menu li a').click(function stay() {
$('.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});

Here is JS fiddle
$(function stay() {
$('ul.menu li a').click(function () {
$('ul.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});

Using javascript function parameters to show jquery tabs

Actually I am trying to do jquery tabs. I have written a code that needs rework and probably better ways to implement. I think I could use function arguments to achieve this, but I am not sure. Can somebody tell me how to achieve this in a better way. Though my code works but I think it is rudimentary. I would also like only one tab to display a background color if this is active.
http://jsfiddle.net/5nB4P/
HTML:
<div id="nav">
<ul>
<li>First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
</div>
<div id="content">
<div class="tabs first">First Div content</div>
<div class="tabs">Second Div content</div>
<div class="tabs">Third Div content</div>
</div>
Script:
$(function() {
$("li :eq(0)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(".tabs:gt(0)").hide();
$(".tabs:eq(0)").show();
})
$("li :eq(1)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(this).css("background","red")
$(".tabs:gt(1), .tabs:lt(1)").hide();
$(".tabs:eq(1)").show();
})
$("li :eq(2)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(".tabs:lt(2)").hide();
$(".tabs:eq(2)").show();
})
})

There is a much better way to achieve this. Here you go
$(function() {
$("li").click(function() {
$(this).css("background","red").siblings().css("background","none");
$(".tabs").hide().eq($(this).index()).show();
return false;
});
})
Working Demo
As #Niels mentioned for setting the background style you can have a dedicated class(active) and add/remove this class instead of setting the inline sytle.
FYI..In the above code $(this).index() gives the position of the first element within the jQuery object relative to its sibling elements

CSS:
.active {
background-color:red;
}
JQuery:
$('li').click(function(){
$this = $(this);
$this.addClass('active').siblings().removeClass('active');
$('.tabs:eq(' + $this.index() + ')').show().siblings().hide();
});
Here is a demo: http://jsfiddle.net/5nB4P/6/

Here is the way that I updated this to make it smaller and I believe to be more effective and easier to use:
http://jsfiddle.net/5nB4P/7/
Code:
$("#nav ul li").click(function(){
var id = $(this).attr("rel");
$("#nav ul li").each(function(){
$(this).removeClass("active");
});
$(this).addClass("active");
$("#content div").each(function(){
$(this).hide();
});
$("#"+id).show();
});

Do you mean this? http://jsfiddle.net/tsukasa1989/5nB4P/1/
$(function() {
$("#nav li").click(function(){
// Handle active status
$(this).addClass("active").siblings().removeClass("active");
// Show the tab at the index of the LI
$(".tabs").hide().eq($(this).index()).show();
})
// Don't forget to set first tab as active one at start
.eq(0).addClass("active");
})
If you want to style the active tab use
#nav li.active{}

My approach doesn't use arguments, but HTML class and id references to shorten things: http://jsfiddle.net/ZScGF/1/