Mike Mike - 8 months ago 60
CSS Question

jQuery CSS - do not allow to override

I have a page with a set of jQuery accordions built from an MVC


Before each accordion, I would like to add some text in a
tag. Whatever I have tried, the jQuery styling has added classes and styles to my tag.

Is there a simple way to add a
tag and say that I want it the same as the other
tags on the non jQuery page? Almost like an inline


Code to build accordions:

<section id="accordions" aria-label="accordion-expand\collapse" class="col-md-12">
foreach (var accordion in Model.Content.Children.Where(f => f.DocumentTypeAlias.Equals("Accordion", StringComparison.CurrentCultureIgnoreCase)))
var isInScheme = Model.User != null ? Model.User.IsInScheme(accordion.GetPropertyValue<String>("schemeTypes")) : false;
var isMemberStatus = Model.User != null ? Model.User.IsMemberStatusType(accordion.GetPropertyValue<String>("memberStatusTypes")) : false;

if ((!accordion.HasValue("schemeTypes") && !accordion.HasValue("memberStatusTypes")) || (isInScheme && isMemberStatus))
if (accordion.GetPropertyValue<String>("accordionText") != "" & accordion.GetPropertyValue<String>("accordionText") != null)

<h3 class="clearfix" id="@accordion.Id">
<span class="title">@(accordion.GetPropertyValue<String>("accordionHeader"))</span>
<article class="clearfix">

where the
is being inserted, jQuery is adding the classes to it.

Answer Source

If I understood you correctly, the problem is your jQuery CSS selector.

You may have something like this:


That is why jQuery is matching all your <p> tags, even the ones you do not want it to.

What you could do is change your tag selector to a class selector, then use this class in the descendant <p> elements of the accordion.

Option 1:

Change this:


To this:

<p class="accordion-text">accordion.GetPropertyValue<String>("accordionText")</p>

And this:


To this:


Option 2:

$("#accordions p").addClass("class");