I need help creating a interactive checklist. The idea is that when you click on an item in the list, a hidden child element should become visible.
<div id="list_one">
<h2>LIST TITLE</h2>
<div id="line"></div>
<ul>
<li id="1-1"><div class="blue_line"></div><div class="circle"></div>TASK ONE</li>
<li id="1-2"><div class="blue_line"></div><div class="circle"></div>TASK TWO</li>
<li id="1-3"><div class="blue_line"></div><div class="circle"></div>TASK THREE</li>
<li id="1-4"><div class="blue_line"></div><div class="circle"></div>TASK FOUR</li>
<li id="1-5"><div class="blue_line"></div><div class="circle"></div>TASK FIVE</li>
<li id="1-6"><div class="blue_line"></div><div class="circle"></div>TASK SIX</li>
</ul>
</div>
Below is my current Javascript implementation:
$(document).ready(function() {
$(".blue_line").css("visibility","hidden");
$("li").click(function() {
var id = this.id;
console.log(id);
$(id).children().css("visibility","visible");
});
});