I am working on a site that contains a sliding div that is animated with jQuery. The div displays a title and, when hovered over, it slides out and a different div with detail information slides into its place.

My problem is that the text in both of the divs needs to be editable by editors in the design view. But, since one of the div is always hidden by default (as defined in jQuery/css), the editable text web part is not showing up on the design tab.

Is there a way I can control how the divs are styled based on the current view mode that the user is in? Such as force both divs' to ignore the site's stylesheet and change their css 'display' property to be 'block' only when in edit mode?

Any help/suggestions would be great. Thanks.