How to linked or making related two different contents

Question

This is my code snippet:

$('body').on('click', '.show', function() {
  $('li').removeClass('active');
  $('show').removeClass('open');

  $(this).parent().addClass('active');
  $(this).addClass('open');

  if ($('#first').hasClass('active')) {
    $('#first-child').show();
  } else {
    $('#first-child').hide();
  };

  if ($('#second').hasClass('active')) {
    $('#second-child').show();
  } else {
    $('#second-child').hide();
  };

  if ($('#third').hasClass('active')) {
    $('#third-child').show();
  } else {
    $('#third-child').hide();
  };

});

$('body').on('click', '.show.open', function() {
  $(this).parent().removeClass('active');
  $(this).removeClass('open');
  $(".child").hide();

});

ul,
li {
  list-style: upper-alpha;
}

.show {
  cursor: pointer;
}

.active {
  border-left: 3px solid #ccc;
}

.child {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parent">
  <li id="first">
    <div>Many Contents</div>
    <div class="show">Some More Clickable Contents</div>
  </li>
  <li id="second">
    <div>Many Contents</div>
    <div class="show">Some More Clickable Contents</div>
  </li>
  <li id="third">
    <div>Many Contents</div>
    <div class="show">Some More Clickable Contents</div>
  </li>
</ul>
<div id="first-child" class="child">
  A's Related Contents
</div>
<div id="second-child" class="child">
  B's Related Contents
</div>
<div id="third-child" class="child">
  C's Related Contents
</div>

If you click on the "Some More Clickable Contents", related contents will be visible which are not actually Child content. So, I've to make this functionality like this:

$('body').on('click', '.show', function() {  
   $(this).parent().addClass('active');
   if($('#first').hasClass('active')) {
      $('#first-child').show();
   } else {
      $('#first-child').hide();
   };
});

But, if I could add href at parent li with related content's Id, I will able to manage functionality with more small jQuery code like this:

<li id="first" href="#first-child"></li>

$('body').on('click', '.show', function() {  
   childId = $(this).parent().href
   childId.show();
});

So that, I need not check if else every time. But, href at li might not be allowed by W3c Validation. So, how can I linked those different contents?

Panoptik · Accepted Answer · 2014-11-11T15:26:19.407

1

You can use data attributes

<li id="first" data-id="first-child"></li>

and javascript

$('body').on('click', '.show', function() {  
   childId = $(this).parent().data('id')
   $('#' + childId).show();
});

UPDATE

You skip dot at your show class

$('.show').removeClass('open');

edited Nov 11 '14 at 15:26

answered Nov 11 '14 at 15:04

Panoptik

1,094
1
16
23

@user1896653 answer you can find here http://stackoverflow.com/questions/3957867/is-there-any-problem-with-using-html5s-data-attributes-for-older-browsers – Panoptik Nov 11 '14 at 15:06
anyway you can work with classes with some prefix. this method should work in any browsers – Panoptik Nov 11 '14 at 15:10
Thanks! Can you please help me for one thing. Actually, I am not expert at jQuery. That's why, I can't understand why it's happened. The problem is: If you click on the A. "Some More Clickable Contents", then B. "Some More...", then C. "Some More..." and then again A. "Some More..." A's related content isn't showing for first click, It's showing with double click! – user1896653 Nov 11 '14 at 15:14
@user1896653 What is your problem? – Panoptik Nov 11 '14 at 15:16
Hey! Ignore it. I've found the reason. I missed the '.' for show class at this line: $('show').removeClass('open'); Thanks for your help. – user1896653 Nov 11 '14 at 15:26

How to linked or making related two different contents

1 Answers1