Mike Mike - 13 days ago 6
CSS Question

jQuery CSS - do not allow to override

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

foreach
statement.

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

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

EDIT

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)
{
<p>accordion.GetPropertyValue<String>("accordionText")</p>
}

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


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

Answer

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

You may have something like this:

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

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:

<p>accordion.GetPropertyValue<String>("accordionText")</p>

To this:

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

And this:

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

To this:

$(".accordion-text").addClass("class");

Option 2:

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