How to display: none between parent and sibling tags when using show more show less Jquery

Question

My markup is set up like so:

<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 as a show more show less) the two tags within my h5 tag. However I can't seem to use this code to ensure that the strong tag with id="head2" is not displaying. I've tried

<style>

.head2
display:none;

</style>

I've also tried

<style>

strong.head2
display:none;

</style>

Im unsure if this has anything to do with Jquery so ive pasted that in 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();
});
});

Answer 1

You're targeting a class of .head2 in your CSS, but have an id. Use an id # selector instead. For example...

<strong id="head2">{{$blog->Title}}</strong>

---

#head2 {
    display:none;
}

See CSS Selector Reference for more information