CODEWITHSUNDEEP
jqueryhtmlcss
Jordan
Jordan

Reputation: 9911

How to put borders between elements that are shown and hidden?

I'm using this style to put a border in between the elements of a list. The elements are divs. 

.event-type:not(:last-child) {
    border-bottom: 1px solid #000;
}

I show and hide these elements in JavaScript. The problem is that when I hide the last element there is a border at the bottom of the list. Is there a way around this using CSS alone?

<div class='event-type'>One</div>
<div class='event-type'>Two</div>
<div id='test' class='event-type'>Three</div>

<script>
    $('#test').hide();
</script>

Upvotes: 0

Views: 54

Answers (1)

omukiguy
omukiguy

Reputation: 1437

The issue comes from your CSS that loads before the JS which manipulates the DOM. Try using the reverse logic. Add top borders and remove border for the first item. That way if you any list item the borders reorder themselves and styling remains.

const lc = document.querySelector("#lastid");
lc.style.display = 'none';
li {
    border-top: 1px solid #eee;
}
li:first-child {
    border-top: none;
}
<ul>
  <li>List 1i</li>
  <li>List 2i</li>
  <li>List 3i</li>
  <li>List 4i</li>
  <li>List 5i</li>
  <li>List 6i</li>
  <li>List 7i</li>
  <li>List 8i</li>
  <li>List 9i</li>
  <li id="lastid">List 10i</li>
</ul>

Upvotes: 1

Related Questions