Corentin Branquet Corentin Branquet - 6 months ago 12x
Javascript Question

Show divs with jQuery

I have this code


<ul class="myFilters">
<li data-type="A"><a href="#">A</a></li>
<li data-type="B"><a href="#">B</a></li>
<li data-type="C"><a href="#">C</a></li>

<div class="filter">

<ul class="title">
<li><a href="#" data-toggle="#Assurance">Assurance</a></li>
<li><a href="#" data-toggle="#Couverture">Couverture</a></li>
<li><a href="#" data-toggle="#Banque">Banque</a></li>
<li><a href="#" data-toggle="#Alimentation">Alimentation</a></li>

<div id="Assurance" class="category">

<div id="Couverture" class="category">
<li>Try it !</li>

<div id="Alimentation" class="category">
<li>AN example</li>

Here's my JS script

jQuery(function ($) {

$('.myFilters li').click(function(){
var v = $(this).text()[0]
$('.title li').hide().filter(function(){
return $(this).text().toUpperCase()[0] == v;

$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element


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 !



On load:

$('.myFilters li:first').trigger('click');

And inside its click:


jsfiddle DEMO