Jquery to toggle one div of same class on click

Question

function demo(){
$('.box').slideToggle('fast');
}

$(document).ready(function(){
$.getJSON( "js/JobOpenings.json", function( data ) {
      var glrScrlImg = [];

      $.each( data.getJobOpeningsResult, function( key, val ) {
          var st = "",id,st2= "",st3="",id;
          st +="<h4>" + val.JobTitle + "</h4>";           
          st3 += "<div class='box'>" + val.JobDetails + "</div>";
          $("#newsDetails").append("<li  onclick='demo()'>" + st+val.JobSector + "<br>" + st3 + "</li>");
          $('.box').hide();
      });        
   });
});

I am reading data from a json file. The div with 'box' class is hidden. Currently this code is displaying all div on click of the li. What changes should I make to display only the div corresponding to the clicked li?

Answer 1

Pass the control to the function and then based on your control slideToggle its respective .box

function demo(ctrl){
   $(ctrl).find('.box').slideToggle('fast');
}

$(document).ready(function(){
$.getJSON( "js/JobOpenings.json", function( data ) {
      var glrScrlImg = [];

      $.each( data.getJobOpeningsResult, function( key, val ) {
          var st = "",id,st2= "",st3="",id;
          st +="<h4>" + val.JobTitle + "</h4>";           
          st3 += "<div class='box'>" + val.JobDetails + "</div>";
          $("#newsDetails").append("<li  onclick='demo(this)'>" + st+val.JobSector + "<br>" + st3 + "</li>");
          $('.box').hide();
      });        
   });
});

Or add a class to li and attach an event handler like below instead of writing inline onclick as below:

$("#newsDetails").append("<li class="someclass"'>" + st+val.JobSector + "<br>" + st3 + "</li>");

and then instead of function demo() write this

$('#newsDetails').on('click','.someclass',function(){
     $(this).find('.box').slideToggle('fast');
});

UPDATE

Method 1:

function demo(ctrl){
       $('#newsDetails').find('li.box').hide('fast'); //hide all the .box
       $(ctrl).find('.box').slideToggle('fast');
}

Method 2:

$('#newsDetails').on('click','.someclass',function(){
         $('#newsDetails').find('li.box').hide('fast'); //hide all the .box 
         $(this).find('.box').slideToggle('fast'); 
});

UPDATE 2:

Method 1:

function demo(ctrl){
       $('#newsDetails').find('li.box').not($(ctrl).find('.box')).hide('fast'); //hide all the .box
       $(ctrl).find('.box').slideToggle('fast');
}

Method 2:

$('#newsDetails').on('click','.someclass',function(){
         $('#newsDetails').find('li.box').not($(ctrl).find('.box')).hide('fast'); //hide all the .box except this
      $(this).find('.box').slideToggle('fast'); 
});

Answer 2

You should structure your html (which is missing from the question!) so that the div and li are "connected" in some way (maybe the div is child of li, or they have same class, ecc). Right now the line

$('.box').slideToggle('fast');

is applied to all element with class '.box' in your page. You want to be more selective there, that's where the way you structure the html comes into play.

Here's an example: http://jsfiddle.net/owe0faLs/1/

Answer 3

Here what we need to do is to find the .box element within the clicked li, so we need to get a reference to the clicked element.

I would use a delegated jQuery event handler with css to initially hide the element

$(document).ready(function () {
    $('#newsDetails').on('click', 'li', function () {
        $(this).find('.box').toggleClass('hidden');
    })

    $.getJSON("js/JobOpenings.json", function (data) {
        var glrScrlImg = [];

        $.each(data.getJobOpeningsResult, function (key, val) {
            var st = "",
                id, st2 = "",
                st3 = "",
                id;
            st += "<h4>" + val.JobTitle + "</h4>";
            st3 += "<div class='box hidden'>" + val.JobDetails + "</div>";
            $("#newsDetails").append("<li>" + st + val.JobSector + "<br>" + st3 + "</li>");
        });
    });
});

with css

.hidden {
    display: none;
}