Hide text if css class not declared

Question

I want to hide a text:

<strong class="showrelated">In Verbindung stehende Artikel: </strong>
<?php echo do_shortcode('[custom-related-posts title="" order_by="title" order="ASC" none_text=""]'); ?>

If css class is not declared. My shortcode function get this class .crp-list

Not sure how can I do that. I have tried the following but nothing happens:

if ($(".crp-list")[0]) {
    $(".showrelated").show();
} else {
    $(".showrelated").css("display","none");
}

What exactly would you like to happen? Do want to show and hide dynamically the text or just after page load? — Krzysztof Janiszewski, Aug 21 '18 at 13:01
Do you mean `if ($(".crp-list").length !== 0) $(".showrelated").show();`? — Arup Rakshit, Aug 21 '18 at 13:02
I want to hide the text dynamically if the class .crp-list doesn't exist.It shows when there is related posts http://prntscr.com/kl7zm9, and if there is no related posts i want to hide -> In Verbindung stehende Artikel: — Милен Чавдаров, Aug 21 '18 at 13:04
`$(".showrelated").toggle($(".crp-list").length);` and you need to have the code run after the elements exist on the page. — epascarello, Aug 21 '18 at 13:04
My guess it is a dupe of https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — epascarello, Aug 21 '18 at 13:06

score 0 · Accepted Answer · answered Aug 21 '18 at 13:05

When crp-list class is present in a DOM.

if ($(".crp-list").length !== 0) {
  $(".showrelated").show();
} else {
  $(".showrelated").hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong class="showrelated">In Verbindung stehende Artikel: </strong>

<div class="crp-list"></div>

When crp-list class is not present in a DOM.

if ($(".crp-list").length !== 0) {
  $(".showrelated").show();
} else {
  $(".showrelated").hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong class="showrelated">In Verbindung stehende Artikel: </strong>

This worked perfectly. Thank you so much. Looked like i am using different jQuery version and that's why it probably didn't worked at my end. — Милен Чавдаров, Aug 21 '18 at 13:10

score 0 · Answer 2 · answered Aug 21 '18 at 13:12

0

Another option would be to check if the element you are talking about has a specific class but this is a guess because I don't understand your question entirely.

if ( $('#element-to-check').hasClass('crp-list') ) {
    $(".showrelated").show();
}

answered Aug 21 '18 at 13:12

Martin Geldart

407
2
8

This is does not solve the problem. Probably the element with class `crp-list` does not have an id and then your solution does not work. – Krzysztof Janiszewski Aug 21 '18 at 13:14
2

@KrzysztofJaniszewski - thanks, but at the time of posting, the OP didn't share the code that showed the element that may or may not have an ID, and therefore I took a guess, as I clearly stated in my answer! I suggest you be pedantic elsewhere, as I usually post decent answers where a poster gives decent information. And I don't suppose the OP has an element called element-to-check, either!!! – Martin Geldart Aug 21 '18 at 15:25
Answers do not have to be 100% working solutions. It is perfectly okay to give an example or a demonstration of how something works for the OP to take away and try. – Martin Geldart Aug 21 '18 at 15:32

Hide text if css class not declared

2 Answers2