...">
Geek Answers Handbook

How to display: no between parent and sibling tags when using show more show less jQuery

My markup is set up like this:

<div class="media-body" > <h5 class="media-heading"> <strong id="head">{{$blog->Title}}</strong> <strong id="head2">{{$blog->Title}}</strong> </h5> <button id="hide">Hide</button> <button id="show">Show</button> </div>

I have 2 buttons using jquery to show and hide (which act like shows more show less) two tags in my h5 tag. However, I cannot use this code to make sure that a strong tag with id="head2" is not displayed. I tried

 <style> .head2 display:none; </style>

I also tried

 <style> strong.head2 display:none; </style>

Im unsure if this has anything to do with jQuery, so ive inserted it below just in case.

JQuery Code:

 $(document).ready(function(){ $("#head").html(function(i, h) { var words = h.split(/\s/); return words[0] + ' <span>' + words[1] + ' </span>' +' <span>' + words[2] + ' </span>'; }); }); $(document).ready(function(){ $("#hide").click(function(){ $("#head2").hide(); }); $("#show").click(function(){ $("#head2").show(); }); $("#hide").click(function(){ $("#head").show(); }); $("#show").click(function(){ $("#head").hide(); }); });
+5
source share
1 answer

You focus on the .head2 class in your CSS, but you have an identifier. Use the id # selector instead. For instance...

 <strong id="head2">{{$blog->Title}}</strong> 
 #head2 { display:none; }

See the CSS Selection Guide for more information.

+5
source

More articles:


All Articles