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.


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

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

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

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

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

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


.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

    CSS Howto..

    how to apply transform rotate all browse in inline css using jquery

    How would I control the position of a drop down select menu?

    Animate Chartist on show

    How to neutralize CSS definitions without overriding

    less: how to import multiple css?

    How to set incremental CSS classes in each Table Cell with jQuery?

    how to do css changes only to links that are in side specific div without defining classes to a elements

    How should I start to learn JavaScript, jQuery, etc.? My programming knowledge is zero [closed]

    How to create a two column layout

    how to remove backgrount property of a div from css through jQuery? [duplicate]

    How can I style external links like Wikipedia?

    How to make jQuery target and attach a plugin call to hundreds of CSS ID's with an ID number at the end of them?

    how do i make the “box-shadow” to the whole div

    html element h1 with links as background image show them in one line

    How do let CSS change the inset shadow on li hover, instead of resetting it?

    How to avoid clipping in CSS?

    How can I get horizontal overflows to work in CSS?

    Showing required fields by bolding

    How to spread three columns in CSS across a page equally

    How to create a clickable block?

    How to slice an Image Border for use in CSS?

    How to target certain text to make bold using css

    How volume button is generated [closed]

    How to enable overflow scrolling within a Semantic Ui Grid?

    How to avoid display block for a particular div element using css

    How to prevent “jerking” of page in browser

    how to write a desktop application which uses HTML and CSS for user interface and python/perl/c++/java for the processing?

    how to display php search engine execution time and number of results before the results

    How can I make the menu to wrap when I resize my browser?

    How to go about making an image move up in the div on hover