I have a template that I'm creating for colleagues to use in a WYSIWYG editor (am a teacher) with an accordion so they can easily add content to each one of them. It will have surplus headers/content for colleagues to use but that doesn't show any that has something like "title_name" as the text of the header. The HTML is:
<div class="accordion">
<div class="card">
<div class="card-header" data-toggle="collapse">
<h2 class="card-title">
Accordion 1
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 1 of 4 content here.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 2
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 2 of 4 content here.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 3
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 3 of 4 content here.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">
title_name
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 4 of 4 content here.</p>
</div>
</div>
</div>
</div>
The jquery that I have is
$(".card-header").each(function(){ ($(this).text() === "title_name") ? $(this).hide() : $(this).show()});
Help will be greatly appreciated :)
You can use :contains of jquery. Since you are having h2 tag inside div of class card-header, jquery is not able to get the text of title_name. I verified this code should work.
$("div.card-header:contains(title_name)").hide();