Hide the content based on Children class-CodePudding

I need one help with the code, I have two HTML div blocks with the same class name and there is one extra h2 tag with different class present in one div block. I want to hide if h2 class name is not present in that div and show if the h2 class name is present. Please find the below mentioned code that I have created.

-- First block Div --

<div >
    <h2 ></h2>
    <ul >
        <li >Content not to Display</li>
    </ul>
    <div >
        <p>Content to Display</p>
    </div>
</div>

-- Second block Div --

<div >
    <ul >
        <li >Content not to Display</li>
    </ul>
    <div >
        <p>Content to Display</p>
    </div>
</div>

-- jQuery Code --

$(document).ready(function () {
    if ($(".course-content").find(".accesshide")) {
        $(".course-content").find(".topics").show();
    } else if ($(".course-content").find(".single-section")) {
        $(".course-content").find(".topics").hide();
    } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
        <h2 ></h2>
        <ul >
            <li >Content not to Display</li>
        </ul>
        <div >
            <p>Content to Display (this statement is inaccurate)</p>
        </div>
    </div>
    
    <div >
        <ul >
            <li >Content not to Display (this statement is inaccurate)</li>
        </ul>
        <div >
            <p>Content to Display</p>
        </div>
    </div>

CodePudding user response：

Since the controls are independent events, they should be evaluated separately. Therefore, two separate if blocks should be used. In the second event in the solution below, the first child element of the parent element of the selected element is hidden by selecting it.

$(document).ready(function () {
  if ($(".course-content").find(".accesshide")) {
      $(".course-content > .accesshide").find(".topics").show();
  } 

  // Because both <div> elements have the ".topics" class style applied, the ".single-section" 
  // element is selected and the first child element of the parent element is hidden.
  if ($(".course-content").find(".single-section")) {
      $(".course-content > .single-section").parent().children(':first-child').hide();
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <h2 ></h2>
  
  <ul >
      <li >Content not to Display</li>
  </ul>
  
  <div >
      <p>Content to Display</p>
  </div>
</div>

<hr>
    
<div >
  <ul >
      <li >Content not to Display</li>
  </ul>
  
  <div >
      <p>Content to Display</p>
  </div>
</div>

CodePudding user response：

This is trivial using a CSS child selector (>). Just find the collection of elements that are an accesshide child of a course-content and hide the topics child of their parents.

You could do something similar with a descendant selector ( ), but since you know it's a child for this case, the child selector is perhaps more accurate.

MDN's Child Combinator docs.

$(document).ready(function () {
    $('.course-content>.accesshide').parent().find('.topics').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
        <h2 ></h2>
        <ul >
            <li >Content not to Display</li>
        </ul>
        <div >
            <p>Content to Display</p>
        </div>
    </div>
    
    <div >
        <ul >
            <li >Content not to Display (this should actually be shown - there's no h2 in the parent div)</li>
        </ul>
        <div >
            <p>Content to Display</p>
        </div>
    </div>

CodePudding user response：

You don't need any js code, just only css with adjacent or general sibling combinator. For example:

.topic {
  display: none;
}
.accesshide   .topic {
  display: block;
}