Somename Somename - 4 months ago 9
Javascript Question

How to create a jquery function for li

So I have created a div with a

<ul>
that holds the list of the filters and when any
<li>
us clicked it shows the corresponding filters.

https://jsfiddle.net/2x8enu54/

The following doesnt look very promising:

$(".f1").click(function(){
$(".Field1").removeClass("hidden");
$(".Field2").addClass("hidden");
$(".Field3").addClass("hidden");
});


How can I create a function so that when a
li
from the 'selectul' div is clicked the respective results are displayed in the 'optionsdiv'.

Many thanks.

Answer

I would annotate each of your li elements like so :

<li class="clickable" data-field="1"><div class="itemslist">Field1</div></li>
<li class="clickable" data-field="2"><div class="itemslist">Field2</div></li>
<li class="clickable" data-field="3"><div class="itemslist">Field3</div></li>
<li class="clickable" data-field="4"><div class="itemslist">Field4</div></li>
<li class="clickable" data-field="5"><div class="itemslist">Field5</div></li>

and make your checkbox sections like so :

<div class="Field1 Field">
<h3>Options for Field1</h3>
<input type = "checkbox" value="1" />option1
<input type = "checkbox" value="2">option2
<input type = "checkbox" value="3">option3
</div>
</li>
<li><div class="Field2 Field">
<h3>Options for Field2</h3>
<input type = "checkbox" value="11">option11
<input type = "checkbox" value="12">option12
<input type = "checkbox" value="13">option13
</div>
</li>
<li>
<div class="Field3 Field">
<h3>Options for Field3</h3>
<input type = "checkbox" value="21">option21
<input type = "checkbox" value="22">option23
<input type = "checkbox" value="23">option23
</div>

and then make your script like so :

$(".clickable").click(function(){
    $(".Field").hide();
  var element=$(this).data("field");
  $(".Field" + element).show();
})

$(".Field").hide();