How to stop CSS to be applied to a part of layout on the samepage, (wikipage)

I have created a SharePoint Page using Wiki page option. - I used the two column option and created the page. Added the html code for accordions using the Js and some css style I did that by using Insert-> Embedded code -> added the code in the box and it was added as a webpart and it solved my purpose. - But here is a new problem, I don't want the CSS to be applied to the other column of the page. How to avoid that.

Also, I want to change the color of the alternate header to grey, any code for that would really help, thank you. please help

Best Regards

<script src="..//SiteAssets/jquery-2.0.2.min.js"></script>
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Untitled</title>
<style>
/*** CSS for collapsable headers ***/

/*** Expanded h2 ***/
#DeltaPlaceHolderMain h2:before {
  display: inline-block;
  margin-right: .5em;
  border-radius: 2em;
  padding: 0 .05em .05em ;
  background: black;
  color: #fff;
  cursor: pointer;
  vertical-align:middle;
  font: bold 0.8em/0.8 verdana, sans-serif;
  content: '\2212'; /* math operators minus sign */
}
/*** Collapsed h2 ***/
#DeltaPlaceHolderMain h2.expand:before {
  content: '\2b'; /* basic latin plus sign */
}
</style>

</head><body>

<div id="DeltaPlaceHolderMain">

</div>

Vishnu

I need CSS for the headers to look like this when I collapse

css

html

sharepoint

Forum Discussion

How to stop CSS to be applied to a part of layout on the samepage, (wikipage)

Share

Resources