We Keep Coding

Show divs with jQuery

I have this code http://jsfiddle.net/cwahL1tz/
My HTML
<ul class="myFilters">
<li data-type="A">A</li>
<li data-type="B">B</li>
<li data-type="C">C</li>
</ul>
<div class="filter">
<ul class="title">
<li>Assurance</li>
<li>Couverture</li>
<li>Banque</li>
<li>Alimentation</li>
</ul>
<div id="Assurance" class="category">
<ul>
<li>Groupama</li>
</ul>
</div>
<div id="Couverture" class="category">
<ul>
<li>Try it !</li>
</ul>
</div>
<div id="Alimentation" class="category">
<ul>
<li>AN example</li>
</ul>
</div>
</div>
Here's my JS script
jQuery(function ($) {
$('.myFilters li').click(function(){
$(".category").hide();
var v = $(this).text()[0]
$('.title li').hide().filter(function(){
return $(this).text().toUpperCase()[0] == v;
$(".category:first").show();
}).show()
})
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$(".category").hide();
$(selector).show();
});
});
It works fine but I trying to arrange some stuff but I'm stuck.
When I load the page all the links and divs appears, I just only want the divs of the first letter appear.
And when I click on C for example, I want the first div to show from the first link.
Thanks for your help !

EDITED:
On load:
$('.myFilters li:first').trigger('click');
And inside its click:
.first().find('a[data-toggle]:first').trigger('click');
jsfiddle DEMO

You can simply do that with first selecting the element with the right selector and then you can trigger the click event manually :
Show the Assurance content on load :
$('a[data-toggle="#Assurance"]').click();
Show first content on click :
$('.myFilters li').click(function(){
$(".category").hide();
var v = $(this).text()[0]
$('.title li').hide().filter(function(){
return $(this).text().toUpperCase()[0] == v;
}).show()
$('a[data-toggle]:visible:first').click();
})
Updated jsFiddle

Without going into any more javascript, you can display the content the way you would like using css selectors:
.category {display:none;}
.category:nth-of-type(1) {
display:block;
}
http://jsfiddle.net/5ageasm4/1/

Is this what you want. Check the Fiddle
I am basically just triggering the first item in the li
$(".title > li:first").find("a[data-toggle]").trigger("click");
and i am doing the same with the category.
EDIT
I updated my Fiddle
NEW EDIT
Created a new Fiddle, this one just removes all the duplicate code.
So basically i created these 2 functions
that.selectFirstElem = function(selector){
selector.find("a[data-toggle]").trigger("click");
};
that.loadFirstDataToggle = function(input){
return $('.title li').hide().filter(function(){
return $(this).text().toUpperCase()[0] == input;
}).show();
};
And those 2 functions you can just call in the places where you need it.

On click highlight the tab and display the content

currently I'm trying like if I click on the tab it will change color instead of the standard color I set.How do I go about doing it because I'm using the toggle() function.
Currently I'm stuck at here.
$("li").click(function(){
$(this).css('background-color',"#6F0")
})
http://jsfiddle.net/eMLTB/112

Hide all .tabContent elements on page load and show them on click of li.
Write:
JS:
$("li").click(function () {
$($(this).find("a").attr("href")).toggle();
$(this).toggleClass("active");
});
CSS:
.active {
background-color:#6F0;
}
.tabContent {
display:none;
}
DEMO here.

Check the line of script where i placed a comment, I think after adding this solves your problem.
<div id="container">
<nav id="tabs">
<ul id ="ta" class="nav">
<li id="a">0</li>
<li id="b">5</li>
<li id="c">10</li>
</ul>
<div class="tabContent" id="tabs-1" >
<h2>Testing1</h2>
</div>
<div class="tabContent" id="tabs-2">
<h2>Testing2</h2>
</div>
<div class="tabContent" id="tabs-3">
<h2>Testing3</h2>
</div>
</nav>
And in your Script
var i;
$("li").each(
function(){
$(this).click(
function(){
i = $(this).find("a").attr("href");
$(i).toggle();
}
);
}
);
$("li").click(function(){
$('li').css('background-color',"#fff");//------>I set it #fff , you Can Put here your standard color code
$(this).css('background-color',"#6F0")
})

First, put the class attribute for <li> tag, example :
<ul id ="ta" class="nav">
<li id="a" class="navi">0</li>
<li id="b" class="navi">5</li>
<li id="c" class="navi">10</li>
</ul>
next, make your code like this :
$("li").click(function(){
$(".navi").css('background-color', "");
$(this).css('background-color', "#6F0");
});

I would suggest using the .toogleClass() method.
It is similar like .toogle() but better for CSS manipulation.
First create class in your CSS that will represent your color and then toogle that class.
http://api.jquery.com/toggleClass/

pass html object to function after it is clicked?

I have a small list I made in behind code and I i have an onclick thats fired when a button is hit (used tag for buttons). I would like to know how to pass the object to my onclick function so I can toggle its class. So something likes this:
<script "text/javascript">
function navButtonClick() {
$(this).toggleClass("is-open");
alert("Yay!");
}
</script>
A person on another forum said that code should work but nothing seems to happen..
Here's what my behind code writes into the html:
<div id="sidebar">
<nav>
<h2>Sites</h2>
<ul id="navMenu">
<li class="toggle">Stanislaus
<ul class="subnav">
<li>Bob</li>
</ul>
</li>
</ul>

I'm assuming by the toggleClass that you're using JQuery, so you can just use .on('click') instead of trying to make it into a function call, but it'd be easier if you assign the toggle class to the a element instead of the li.
http://jsfiddle.net/22eYu/
$('a.toggle').on('click', function(){
$(this).toggleClass("is-open");
alert("yay");
});

Simply pass this to onclick and then use it in the function.
DEMO: jsfiddle
JS:
<script "text/javascript">
function navButtonClick(clicked) {
$(clicked).toggleClass("is-open");
alert("Yay!");
}
</script>
HTML:
<ul id="navMenu">
<li class="toggle">Stanislaus
<ul class="subnav">
<li>Bob
</li>
</ul>
</li>
</ul>
CSS:
.is-open{
background-color: red;
}
However, It appears you just need the following CSS:
CSS: In here just put your CSS class .is-open
a:visited {
background-color: red;
}

You may have scoping problems. Does this work?
<script "text/javascript">
window.navButtonClick = function(el) {
$(el).toggleClass("is-open");
alert("Yay!");
}
</script>
...
Stanislaus
...

js 'toggle' or 'hover' function?

I don't want to use the toggle, what would I need to use to get the following nav structure to stay put when main link is hovered over?
Current js:
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").toggle("fast");
});
});
</script>
Sample page
(Notice that when the submenu pops up, I cannot click on the links, as the submenu fades away)

If you aren't fussed about animation, and you wish to use JQuery you can toggle the CSS visibility rule on the class.
$(document).ready(function()
// Make sure the item is hidden initially, best to do
// this in CSS.
$(".servicesdropped").css("visibility", "hidden");
{
$(".downservices").hover(function()
{
$(".servicesdropped").css("visibility", "display");
},
function()
{
$(".servicesdropped").css("visibility", "hidden");
});
});
Using visiblity means the element will still consume the space it does in the DOM but does not display making sure the structure and positioning of other elements surrounding it are left in tact. The downside is that animations such as fadeIn() and fadeOut() will not work.

Your html markup architecture of menu should like this:
<ul>
<li class="downservices">GUYS
<div class="servicesdropped" style="display: none;">
<ul class="middle">
<h3>Shirts & Tanks:</h3>
<li>MuSkull</li>
<li>Bamboo Athletic Tank</li>
<li>Thin Strap Tank</li>
</ul>
<ul class="right">
<h3>Other Stuff:</h3>
<li>Shorties</li>
<li>Hoodies</li>
<li>Socks</li>
<li>Hats</li>
</ul>
</div>
</li>
<li>products</li>
<li>portfolio</li>
<li>contact</li>
</ul>
And in the script use this:
$(document).ready(function(){
$("li.downservices").hover(function()
{
$(this).find(".servicesdropped").slideDown("fast");
},
function()
{
$(this).find(".servicesdropped").slideUp("fast");
});
});

use like this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").slideDown();
});
});
</script>
for hover out the menu disappear use this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(
function(){
$(".servicesdropped").slideDown();
},
function(){
$(".servicesdropped").slideUp();
}
);
});
</script>

Problem with add/remove class in jquery

I am trying to create a menu navigation sort of like tab's but with vertical buttons.. When I start the page, the first li class is removed and when I click any other link nothign happens other then my content div's being shown..
The first link should always be active on page start.
<script type="text/javascript">
$(document).ready(function() {
var tabContainers = $('div.pages > div');
$('div.sidemenu ul.list a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.sidemenu ul.list li').removeClass('active');
$(this).addClass('active');
return false;
}).filter(':first').click();
});
</script>
<div class="sidemenu">
<ul class="list">
<li class="active">Login & Password</li>
<li>Contact Details</li>
<li>Company & Branch Details</li>
<li>Address Details</li>
</ul>
</div>
<div class="pages">
<div id="first">
CONTENT 1
</div>
<div id="second">
CONTENT 2
</div>
<div id="third">
CONTENT 3
</div>
<div id="forth">
CONTENT 4
</div>
</div>
Not sure what I am missing here.. Maybe its cuase I just woke up and still on my first cup of coffee.. ;)

You're adding the class to the <a> element, but removing it from its parent <li> element.
$(this).addClass('active'); // "this" is the <a> that received the event
// This removes "active" from the <li>
$('div.sidemenu ul.list li').removeClass('active');
Looks like you intend for the <li> to have the class. So you'd do this instead:
$(this).parent().addClass('active');
Or if you don't mind me mixing a little DOM API in:
$(this.parentNode).addClass('active');
Now go get a refill! ;o)

you add the "active" class to the A-Element
$(this).addClass('active');
i guess you want to add it to the LI-Element, so either you add
$(this).parent().addClass('active');
or you register the onclick on the LI-Element