jQuery show content in :after when certain DIV is found in document

Question

I have user reviews tab on our shop and put image to this in .tab:afterjust to make it more visible. But I want to show this content only when there already is any user review.

Why my code doesn't work?

<script>
$(document).ready(function() {
    if($('.review').length) { 
      $(".tab:after").css("display", "block");
    } 
    else { 
      $(".tab:after").css("display", "none"); 
    }
});
</script>

JSFiddle here

EDIT: Thank you all! This does the magic:

$(document).ready(function() {
    if($('.review').length >0) { 
        $(".tab").addClass('show-it')
    }
});

CSS:

.tab:after {
    display:none;
    }
.tab.show-it:after {
    display:block;
    }

see http://stackoverflow.com/questions/3743513/how-do-i-access-style-properties-of-pseudo-elements-with-jquery — Julien Grégoire, May 13 '15 at 06:29

score 1 · Answer 1 · answered May 13 '15 at 06:38

1

Try this:

<script>
$(document).ready(function() {
    if($('.review').length >0) { 
      $(".tab:after").css("display", "block");
    } 
    else { 
      $(".tab:after").css("display", "none"); 
    }
});
</script>

answered May 13 '15 at 06:38

Rohit Arora

2,246
2
24
40

Ram · Accepted Answer · 2015-05-13T15:44:30.847

1

That's because ".tab:after" selector will return an empty set as jQuery and JavaScript in general can't select/manipulate CSS pseudo elements. You can use a class, toggle it and leave the manipulation to CSS.

.tab.block:after {
    display: block;
    ...
}

$(".tab").toggleClass("block", $(".review").length > 0);

http://jsfiddle.net/tzefrbvr/

edited May 13 '15 at 15:44

answered May 13 '15 at 06:44

Ram

143,282
16
168
197

score -1 · Answer 3 · answered May 13 '15 at 06:52

-1

You need to remove :after. See the link below

JSFiddle

answered May 13 '15 at 06:52

Amar Kamthe

2,524
2
15
24

But then the whole tab would be hidden! – freewheeler May 13 '15 at 07:37
The review div if available will contain the tab div where you are adding some images. And when the review div is not available it should hide the tab div. Is that right? – Amar Kamthe May 13 '15 at 08:47
No it should hide tab's :after. I solved it, check edited OP. – freewheeler May 13 '15 at 08:55

jQuery show content in :after when certain DIV is found in document

3 Answers3