Question

In this jsfiddle, I am trying to create a DIV that expands and collapses as you click its title. The title is positioned on the top border, almost like a legend tag of a fieldform. I would like for the top border of the DIV to remain when the box is collapsed.

If you check out my jsfiddle, you’ll see it functions pretty well. However, the border of my container box must be turned off in order to achieve this effect. As a result, the contents of my title shift to the left. They are shifting the same amount of pixels that the left border of the outer DIV was in width.

I’ve tried a few things to compensate for the shift because I would like for the text to remain in the same position while the top border remains in its original position as well, but no luck so far. Does anyone have any ideas?

Answer 1

This one lets the legend stay where it is but cuts the border on the left and right side:

.boxContainerHidden {
    padding-left:        0px;
    border:              2px solid transparent;
    border-top-width:    0px;
}

Try it: forked fiddle

This one lets the legend stay at its position and does not cut the border:

.boxContainerHidden {
   height:           1px;
   border:           solid #ffffff;
   border-width:     2px;
   border-top-width: 0px;
   border-bottom:    0px;
}

Try it too: forked fiddle