Question

Why is it in script 1 I can’t get hidden space to disappear when i show or hide elements or even when I place “display: none” as styles? But in script 2 it works just fine? What am I doing wrong? Below is an image of the code in action:

Script 1:

<script>
    $(document).ready(function() {
        // if there are more than 4 posts, hide all after 4 and show the 'show more' link
        if($('a').length >= 4) {
            $('a').slice(4).hide();
            $("#showMore").show();

            // below display's 'show more' link. when clicked displays hidden comments and hides 'show more' link
            $("#showMore").click(function() {
                $('a').slice(4).show();
                $("#showMore").hide();
            });
        }
    });
</script>

<a>test </a><br>
<a>fed </a><br>
<a>fdes </a><br>
<a>grr </a><br>
<a>rerf </a><br>
<a style="display: none">dferf</a><br>
<a style="display: none">dferf</a><br>
<a style="display: none">dferf</a><br>
<a style="display: none">dferf</a><br>
<a style="display: none">dferf</a><br>
<a style="display: none">dferf</a><br>
<a style="display: none">dferf</a><br>
<a style="display: none">dferf</a><br>

<span id="showMore" href="javascript:void(0)" style="display: none">Show More</span>

Script 2:

<p id="example">This is an example of text that will be shown and hidden.</p>

<input type="button" value="Hide" onclick="$('#example').hide()" />
<input type="button" value="Show" onclick="$('#example').show()" />

Answer 1

you can use gt selector:

Select all elements at an index greater than index within the matched set.

$('a:gt(4)').hide();

instead of <br/> tag which adds extra space, you can use display: block for anchor tags:

a {
   display: block
}