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

%3CLINGO-SUB%20id%3D%22lingo-sub-1448190%22%20slang%3D%22en-US%22%3EHow%20to%20stop%20CSS%20to%20be%20applied%20to%20a%20part%20of%20layout%20on%20the%20samepage%2C%20(wikipage)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1448190%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20created%20a%20SharePoint%20Page%20using%20Wiki%20page%20option.%20-%20I%20used%20the%20two%20column%20option%20and%20created%20the%20page.%20Added%20the%20html%20code%20for%20accordions%20using%20the%20Js%20and%20some%20css%20style%20I%20did%20that%20by%20using%20Insert-%26gt%3B%20Embedded%20code%20-%26gt%3B%20added%20the%20code%20in%20the%20box%20and%20it%20was%20added%20as%20a%20webpart%20and%20it%20solved%20my%20purpose.%20-%20But%20here%20is%20a%20new%20problem%2C%20I%20don't%20want%20the%20CSS%20to%20be%20applied%20to%20the%20other%20column%20of%20the%20page.%20How%20to%20avoid%20that.%3C%2FP%3E%3CP%3EAlso%2C%20I%20want%20to%20change%20the%20color%20of%20the%20alternate%20header%20to%20grey%2C%20any%20code%20for%20that%20would%20really%20help%2C%20thank%20you.%20please%20help%3C%2FP%3E%3CP%3EBest%20Regards%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-html%22%3E%3CCODE%3E%3CSCRIPT%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2F..%2F%2FSiteAssets%2Fjquery-2.0.2.min.js%22%3E%3C%2FSCRIPT%3E%0A%26lt%3Bmeta%20charset%3D%22utf-8%22%20%2F%26gt%3B%0A%3CTITLE%3EUntitled%3C%2FTITLE%3E%0A%3CSTYLE%3E%0A%2F***%20CSS%20for%20collapsable%20headers%20***%2F%0A%0A%2F***%20Expanded%20h2%20***%2F%0A%23DeltaPlaceHolderMain%20h2%3Abefore%20%7B%0A%20%20display%3A%20inline-block%3B%0A%20%20margin-right%3A%20.5em%3B%0A%20%20border-radius%3A%202em%3B%0A%20%20padding%3A%200%20.05em%20.05em%20%3B%0A%20%20background%3A%20black%3B%0A%20%20color%3A%20%23fff%3B%0A%20%20cursor%3A%20pointer%3B%0A%20%20vertical-align%3Amiddle%3B%0A%20%20font%3A%20bold%200.8em%2F0.8%20verdana%2C%20sans-serif%3B%0A%20%20content%3A%20'%5C2212'%3B%20%2F*%20math%20operators%20minus%20sign%20*%2F%0A%7D%0A%2F***%20Collapsed%20h2%20***%2F%0A%23DeltaPlaceHolderMain%20h2.expand%3Abefore%20%7B%0A%20%20content%3A%20'%5C2b'%3B%20%2F*%20basic%20latin%20plus%20sign%20*%2F%0A%7D%0A%3C%2FSTYLE%3E%0A%0A%0A%0A%3CDIV%20id%3D%22DeltaPlaceHolderMain%22%3E%0A%0A%3C%2FDIV%3E%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EVishnu%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22image.png%22%20style%3D%22width%3A%20239px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F197268i369D7D3AF968CADD%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22image.png%22%20alt%3D%22I%20need%20CSS%20%20for%20the%20headers%20to%20look%20like%20this%20when%20I%20collapse%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EI%20need%20CSS%20%20for%20the%20headers%20to%20look%20like%20this%20when%20I%20collapse%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1448190%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ECSS%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EHTML%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Regular Visitor

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 collapseI need CSS for the headers to look like this when I collapse

0 Replies