I have two div banners that have corresponding CSS arrows. When the banners are clicked, the javascript toggles between revealing and hiding the text underneath. Likewise, the respective arrows rotate down when the text is revealed and back up when the text is hidden.

Now, I want my first div banner to be revealed automatically when the page first loads. However, when I drew my CSS arrows, due to the padding of the div, I can't get the arrow in the first div to be the same as the arrow in the subsequent div(s) and line up properly.

/

I've tried messing with the placement of the arrow:

.tri0 {
    margin-left: 20px;
    margin-top: 5px;
}

but the best I can do is push the tri0 arrow up to the padding of the h3 tag and it won't go any farther.

Is there a way that I can set a toggle flag in the toggleClass to make it say that the first div banner is already toggled and subsequent clicks make it un-toggle?

I have two div banners that have corresponding CSS arrows. When the banners are clicked, the javascript toggles between revealing and hiding the text underneath. Likewise, the respective arrows rotate down when the text is revealed and back up when the text is hidden.

Now, I want my first div banner to be revealed automatically when the page first loads. However, when I drew my CSS arrows, due to the padding of the div, I can't get the arrow in the first div to be the same as the arrow in the subsequent div(s) and line up properly.

http://jsfiddle/nVuQ2/1/

I've tried messing with the placement of the arrow:

.tri0 {
    margin-left: 20px;
    margin-top: 5px;
}

but the best I can do is push the tri0 arrow up to the padding of the h3 tag and it won't go any farther.

Is there a way that I can set a toggle flag in the toggleClass to make it say that the first div banner is already toggled and subsequent clicks make it un-toggle?

• javascript
• jquery
• html
• css

2 Answers 2

Your issue happens because of the border of your tris elements. You are displaying different borders in each one of your elements, this will make them appear in different ways.

So basically I set them with the same borders values, the same rotation, and when your page first load it toggles your div and show your first message.

Note that is not necessary to have two different classes to toggle your element state, once that they are equal.

Check in the Fiddle.

Not sure if this is the solution that you wanted. But I hope that helps you.

Thanks.

Try using absolute positioning instead of floating, this way you can ensure the arrows are always aligned in the middle. You'd set parent div to position:relative, and arrows to position:absolute;

The code will look like this -

.slide0, .slide1 {
    position:relative;
}

.tri0, .tri1 {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto 0;
}
.tri0 {
    right:5px;
}
.tri1 {
    right:10px;
}

EDIT: Whoops, I realised I didn't pensate for the rotated arrow. Because the 10px border makes it effectively 10px wide, position .tri1 with right:10px instead. Updated code above, and update fiddle here.

Updated Fiddle