Question

I have a js object (it’s actually an object within another object):

item2 : {               
    itemTitle : "This is item 2",
    itemContent : "To me, in France, a friend speaks from America.  The energy that brings me his voice is born of dammed-up waters a thousand miles from where he sits. <p> The energy I burn up in listening to him is dispensed in the same instant by a lake formed in the River Yser..."
},

The two items (itemTitle and itemContent) are displayed in respective p elements within divs, they make up an accordion display (titles displayed, content hidden until title is clicked).

It works fine except when I add content with html tags in it, in this case a p tag. The first paragraph is hidden, the second one is displayed, but since both paragraphs are encased in a p element whose display is set to none I would think both should be hidden.

So I am thinking the browser (Firefox latest) is seeing the p element and rendering that second paragraph. I thought maybe if I closed off the second p element that would take care of it. But no dice.

I’ve spent the last two years doing objective-c stuff so my css/js/html foo is off a bit. Why would the browser display this if it is within a element that is hidden?

Here is how I am generating the html:

//loop through the accordian properties and build out the html code for them
var i = 0;
for (thisItem in accordian.accordianItems) {
    i++;
    var thisItemData = accordian.accordianItems[thisItem];
    var thisItemCode = "<div id=\"itemContainer\" itemID=\"item_" + i.toString() + "\">" + "<div id=\"itemTitle\"><p class=\"title\"><a href=\"javascript:void(0);\" class=\"titleBar\" itemID=\"item_" + i.toString() + "_titlebar\">" + thisItemData.itemTitle + "</a></p></div>" + "<div id=\"itemContent\"><p class=\"content\">" + thisItemData.itemContent + "</p></div>" + "</div>";
    accordianCode += thisItemCode;
}
//push the code out to our container div
$("#accordianContainer").html(accordianCode);

my css:

#itemContainer {
    margin: 0 0 5px 0;
}
.title {
    margin: 0 0 2px 0;
    height: 20px;
    vertical-align: middle;
    background-color: #39F;
    color: #fff;
    font-family: Arial, Geneva, sans-serif;
    font-size: 14px;
    font-weight: 900;
}
.title a {
    color: #fff;
    text-decoration: none;
}
.content {
    margin: 0 0 0 5px;
    color: #333;
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    font-weight: 200;
    display: none;
}

Any help would be appreciated.

And yes, I did spell accordion wrong throughout my code, I fixed it there but not here. : P

Edit: Switched the p tags for a br and the problem went away. So my new guess is something with a p being a block item? I guess I could style the br tag but I’d rather have the p’s, any suggestions?

Answer 1

Only inline elements are allowed in a p. See http://www.w3.org/TR/html401/struct/text.html#h-9.3.1. The browser is choosing to render it as its own element, which takes it out of the hidden p.