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 class="course-content">
<h2 class="accesshide"></h2>
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="row">
<p>Content to Display</p>
</div>
</div>
-- Second block Div --
<div class="course-content">
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="single-section">
<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 class="course-content">
<h2 class="accesshide"></h2>
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="row">
<p>Content to Display (this statement is inaccurate)</p>
</div>
</div>
<div class="course-content">
<ul class="topics">
<li class="data-list">Content not to Display (this statement is inaccurate)</li>
</ul>
<div class="single-section">
<p>Content to Display</p>
</div>
</div>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.
$(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 class="course-content">
<h2 class="accesshide"></h2>
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="row">
<p>Content to Display</p>
</div>
</div>
<div class="course-content">
<ul class="topics">
<li class="data-list">Content not to Display (this should actually be shown - there's no h2 in the parent div)</li>
</ul>
<div class="single-section">
<p>Content to Display</p>
</div>
</div>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 class="course-content">
<h2 class="accesshide"></h2>
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="row">
<p>Content to Display</p>
</div>
</div>
<hr>
<div class="course-content">
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="single-section">
<p>Content to Display</p>
</div>
</div>I want to hide if h2 class name is not present in that div and show if the h2 class name is present.
You don't need any JS code, just only CSS with adjacent or general sibling combinator. For example:
.course-content .topics {
display: none;
}
.course-content .accesshide + .topics {
display: block;
}
When you have to use jQuery then you can use the same logic and the .next() method (or .nextAll()):
$(".course-content").find(".topics").hide();
$(".course-content").find(".accesshide").next(".topics").show();
If the controlled block can be both before and after the control block, the shortest way is to use the .siblings() method. If you need to show the .topics block if there is an .accesshide block or a .single-section block nearby, you can use this jQuery method for both cases:
$(document).ready(function () {
$(".course-content").find(".topics").hide();
$(".course-content").find(".accesshide, .single-section").siblings(".topics").show();
});<div class="course-content">
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="row">
<p>There are no special blocks nearby</p>
</div>
</div>
<div class="course-content">
<h2 class="accesshide"></h2>
<ul class="topics">
<li class="data-list">Show because of the .accesshide block</li>
</ul>
<div class="row">
<p>Case 1</p>
</div>
</div>
<div class="course-content">
<ul class="topics">
<li class="data-list">Show because of the .single-section block</li>
</ul>
<div class="single-section">
<p>Case 2</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>