How to avoid double borders on list of divs

Tags: jquery,css

Problem :

I have a list of divs which are used as a FAQ. Sometimes the divs are listed below each other, sometimes there is text between them. When they are listed below one other, I have this issue with double borders which I don't know how to solve.

See this fiddle.

HTML

<div class="faq">
<div class="faqheader">Toggle 1</div>
  <div class="faqcontent">Content 1</div>
</div>

<p>Some text...</p>

<div class="faq">
<div class="faqheader">Toggle 2</div>
  <div class="faqcontent">Content 2</div>
</div>

<p>Some text...</p>

<div class="faq">
<div class="faqheader">Toggle 3</div>
  <div class="faqcontent">Content 3</div>
</div>

<div class="faq">
<div class="faqheader">Toggle 4</div>
  <div class="faqcontent">Content 4</div>
</div>

CSS

.faq {width:200px;border: 1px solid #ddd;}
.faqheader {height:20px;font-weight: bold;cursor: pointer;}
.faqcontent {display:none;height:50px;}

The divs need to have a border: border:1px solid #ddd

The borders look fine when there's text between the divs (toggle 1 and 2), but when they are close together (toggle 3 and 4), it doesn't look very nice.

Changing the markup is not an option at this point. They are generated dynamically. Is there any way to fix this issue with either css or jquery?

---

Solution :

add this rule to your CSS

.faq + .faq
{
    border-top: none;
}

Explanation: .faq that comes directly after another .faq dont get a top border.

1. this is a pure CSS solution (without Script)
2. it doesnt assume anithing about the layout (the div's dont have to be last childs of a container, or at some specific index)
3. its fixes the double border issue even if their are multiple .faq one after each other.
4. its a cross browser solution.

See this Working Fiddle