Hide/show second div element if first div class matches on selecting checkbox

Question

I have two divs with same group name and child elements. second div elements will be hidden on page load. When user select first div child element, the respective child element with group name should display on second div. And hidden in second div if user select respecitve option in first div.

<div class="group1" style="float: left;border: 1px solid green;">
<p class="category">Academic</p>
<p class="subject-list">
    <label for="Maths">
        <input type="checkbox" id="Maths" name="Maths">Maths
    </label>
</p>
<p class="subject-list">
    <label for="English">
        <input type="checkbox" id="English" name="English">English
    </label>
</p>
<p class="subject-list">
    <label for="Science">
        <input type="checkbox" id="Science" name="Science">Science
    </label>
</p>
<p class="category">Sports</p>
<p class="subject-list">
    <label for="Tennis">
        <input type="checkbox" id="Tennis" name="Tennis">Tennis
    </label>
</p>
<p class="subject-list">
    <label for="cricket">
        <input type="checkbox" id="cricket" name="cricket">cricket
    </label>
</p>
</div>
<div class="group2" style="float: right; border: 1px solid red; width: 200px; display: none;">
    <p class="category">Academic</p>
    <p class="subject-list">
        <label for="Maths">
            <div id="Maths" style="padding-left: 10px;">Maths</div>
        </label>
    </p>
    <p class="subject-list">
        <label for="English">
            <div id="English" style="padding-left: 10px;">English</div>
        </label>
    </p>
    <p class="subject-list">
        <label for="Science">
            <div id="Science" style="padding-left: 10px;">Science</div>
        </label>
    </p>
    <p class="category">Sports</p>
    <p class="subject-list">
        <label for="Tennis">
            <div id="Tennis" style="padding-left: 10px;">Tennis</div>
        </label>
    </p>
    <p class="subject-list">
        <label for="cricket">
            <div id="cricket" style="padding-left: 10px;">cricket</div>
        </label>
    </p>
</div>

Let's say if user select Maths checkbox in first div, I should see "Academic" group name and "Maths" in right div.

The `id` attribute should be unique in your page – Dekel Dec 24 '16 at 02:43 — Dekel, Dec 24 '16 at 02:43
Can you post the JS you have tried? – Josh Sanger Dec 24 '16 at 02:56 — Josh Sanger, Dec 24 '16 at 02:56

score 1 · Accepted Answer · edited May 23 '17 at 12:00

Fiddle

To show/hide individual items in .group2 you shouldn't hide the entire group. Instead hide the individual items, and show them when you need them.

Fix HTML

First remove the display: none; from this line

<div class="group2" style="float: right; border: 1px solid red; width: 200px; display: none;">

Then remove all your ids or change them to class because ids should be unique.

Hide items using CSS

.group2 div {
  display: none;
}

Toggle visibility using JavaScript

$('.group1').find('input').click(function(){
  var item = $(this).attr('name');
  $('.group2').find('.' + item).toggle();
});

Full Code

$('.group1').find('input').click(function(){
  var item = $(this).attr('name');
  $('.group2').find('.' + item).toggle();
});

.group2 div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="group1" style="float: left;border: 1px solid green;">
  <p class="category">Academic</p>
  <p class="subject-list">
    <label for="Maths">
      <input type="checkbox" class="Maths" name="Maths">Maths
    </label>
  </p>
  <p class="subject-list">
    <label for="English">
      <input type="checkbox" class="English" name="English">English
    </label>
  </p>
  <p class="subject-list">
    <label for="Science">
      <input type="checkbox" class="Science" name="Science">Science
    </label>
  </p>
  <p class="category">Sports</p>
  <p class="subject-list">
    <label for="Tennis">
      <input type="checkbox" class="Tennis" name="Tennis">Tennis
    </label>
  </p>
  <p class="subject-list">
    <label for="cricket">
      <input type="checkbox" class="cricket" name="cricket">cricket
    </label>
  </p>
</div>
<div class="group2" style="float: right; border: 1px solid red; width: 200px;">
  <p class="category">Academic</p>
  <p class="subject-list">
    <label for="Maths">
      <div class="Maths" style="padding-left: 10px;">Maths</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="English">
      <div class="English" style="padding-left: 10px;">English</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="Science">
      <div class="Science" style="padding-left: 10px;">Science</div>
    </label>
  </p>
  <p class="category">Sports</p>
  <p class="subject-list">
    <label for="Tennis">
      <div class="Tennis" style="padding-left: 10px;">Tennis</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="cricket">
      <div class="cricket" style="padding-left: 10px;">cricket</div>
    </label>
  </p>
</div>

Update (1) - Toggle Categories

Updated Fiddle (1)

To show/hide the categories without changing the HTML structure you can:

Keep track of how many active items exist for each category
Loop through each category and show/hide it based on the number of active items for that category

Updated Code (1)

var totals = {};
$('.group1').find('input').click(function(){
  var itemName = $(this).attr('name');
  var item = $('.group2').find('.' + itemName).toggle();
  var change = $(this).is(':checked') ? 1 : -1;
  var category = $(this)
     .closest('.subject-list')
      .prevAll('.category:first')
      .text();
  totals[category] = change + (totals[category] || 0);
  updateCategories();
});

function updateCategories() {  
  $('.group2').find('.category').each(function() {
   var thisCat = $(this).html();
    if (thisCat in totals && totals[thisCat] > 0) {
     $(this).show();
    } else {
     $(this).hide();
    }
  });
}

.group2 div {
  display: none;
}
.group2 .category {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="group1" style="float: left;border: 1px solid green;">
  <p class="category">Academic</p>
  <p class="subject-list">
    <label for="Maths">
      <input type="checkbox" class="Maths" name="Maths">Maths
    </label>
  </p>
  <p class="subject-list">
    <label for="English">
      <input type="checkbox" class="English" name="English">English
    </label>
  </p>
  <p class="subject-list">
    <label for="Science">
      <input type="checkbox" class="Science" name="Science">Science
    </label>
  </p>
  <p class="category">Sports</p>
  <p class="subject-list">
    <label for="Tennis">
      <input type="checkbox" class="Tennis" name="Tennis">Tennis
    </label>
  </p>
  <p class="subject-list">
    <label for="cricket">
      <input type="checkbox" class="cricket" name="cricket">cricket
    </label>
  </p>
</div>
<div class="group2" style="float: right; border: 1px solid red; width: 200px;">
  <p class="category">Academic</p>
  <p class="subject-list">
    <label for="Maths">
      <div class="Maths" style="padding-left: 10px;">Maths</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="English">
      <div class="English" style="padding-left: 10px;">English</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="Science">
      <div class="Science" style="padding-left: 10px;">Science</div>
    </label>
  </p>
  <p class="category">Sports</p>
  <p class="subject-list">
    <label for="Tennis">
      <div class="Tennis" style="padding-left: 10px;">Tennis</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="cricket">
      <div class="cricket" style="padding-left: 10px;">cricket</div>
    </label>
  </p>
</div>

Update (2) - Labels with spaces

Updated Fiddle (2)

If you want to include spaces in your labels you can camelize the text which would change 'Computer science' to 'computerScience' (used for the object key).

Updated Code (2)

var totals = {};
$('.group1').find('input').click(function(){
  var itemName = $(this).attr('name');
  var item = $('.group2').find('.' + itemName).toggle();
  var change = $(this).is(':checked') ? 1 : -1;
  var categoryText = $(this)
     .closest('.subject-list')
      .prevAll('.category:first')
      .text();
  var category = camelize( categoryText );
  totals[category] = change + (totals[category] || 0);
  updateCategories();
});

function updateCategories() {  
  $('.group2').find('.category').each(function() {
   var thisCat = camelize( $(this).html() );
    if (thisCat in totals && totals[thisCat] > 0) {
     $(this).show();
    } else {
     $(this).hide();
    }
  });
}
// From https://stackoverflow.com/a/2970667/5357459
function camelize(input) {
  return input.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
    if (+match === 0) { return ''; }
    return index === 0 ? match.toLowerCase() : match.toUpperCase();
  });
}

.group2 div {
  display: none;
}
.group2 .category {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="group1" style="float: left;border: 1px solid green;">
  <p class="category">Academic</p>
  <p class="subject-list">
    <label for="Maths">
      <input type="checkbox" class="Maths" name="Maths">Maths
    </label>
  </p>
  <p class="subject-list">
    <label for="English">
      <input type="checkbox" class="English" name="English">English
    </label>
  </p>
  <p class="subject-list">
    <label for="Science">
      <input type="checkbox" class="Science" name="Science">Science
    </label>
  </p>
  <p class="subject-list">
    <label for="computer-science">
      <input type="checkbox" class="computer-science" name="computer-science">Computer science
    </label>
  </p>
  <p class="category">Sports</p>
  <p class="subject-list">
    <label for="Tennis">
      <input type="checkbox" class="Tennis" name="Tennis">Tennis
    </label>
  </p>
  <p class="subject-list">
    <label for="cricket">
      <input type="checkbox" class="cricket" name="cricket">cricket
    </label>
  </p>
</div>
<div class="group2" style="float: right; border: 1px solid red; width: 200px;">
  <p class="category">Academic</p>
  <p class="subject-list">
    <label for="Maths">
      <div class="Maths" style="padding-left: 10px;">Maths</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="English">
      <div class="English" style="padding-left: 10px;">English</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="Science">
      <div class="Science" style="padding-left: 10px;">Science</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="computer-science">
      <div class="computer-science" style="padding-left: 10px;">Computer science</div>
    </label>
  </p>
  <p class="category">Sports</p>
  <p class="subject-list">
    <label for="Tennis">
      <div class="Tennis" style="padding-left: 10px;">Tennis</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="cricket">
      <div class="cricket" style="padding-left: 10px;">cricket</div>
    </label>
  </p>
</div>

works great! Is there anyway I can hide group names (Academic, Sports) on page load on second div. Show the group name when user select child elements and hide group name when user un-select respective group child elements? — Nikki, Dec 25 '16 at 18:31
Just added an update to show/hide categories. Let me know if there's anything else, thanks! — adriancarriger, Dec 25 '16 at 20:50
Its broken if any subject having spaces (eg: Computer science). Could you help me how to handle spaces case? — Nikki, Dec 26 '16 at 00:06
Just updated it - I camelized the object key to make it work — adriancarriger, Dec 26 '16 at 01:03
The values "computer science" reading from service. Is there anyway we can add "-" or removing space using jquery once we read from service. — Nikki, Dec 26 '16 at 06:34
I'm not 100% sure what you mean.. at this point it would probably be best to create a new question. Feel free to post the link to it here and I will be happy to help! — adriancarriger, Dec 26 '16 at 15:51