0

I am trying to show/hide with a div in Sharepoint 2010 (yes I know, we're a dinosaur company) by modifying the HTML on the page to use the CSS "checkbox hack". Sharepoint is extremely reluctant to play with modern standards and I can't get the pseudo class :checked to work on a checkbox. The code is just stripped out if it isn't happy.

CSS:

input[type=checkbox] {
    POSITION: absolute;
    opacity:0;
}

input[type=checkbox]:checked ~ .allup {     <------This bit always removed by Sharepoint
    DISPLAY: block;
}

.allup {
    HEIGHT: 500px; FONT-FAMILY: Segoe UI; WIDTH: 900px; POSITION: absolute; TEXT-ALIGN: left; 
Z-INDEX: 1; DISPLAY: none; BACKGROUND-COLOR: #ffffff;
}

HTML

<input id="toggle-1" type="checkbox" value="on"/>
<label class="lab" for="toggle-1">
<b>SHOW ALL<br/>DOCUMENTS</b></label></input>
<div class="allup">
<ul>
<li>

...

All works fine in Dreamweaver/Chrome/IE/Edge but if I put that into Sharepoint it loses it. Is there another way of declaring a pseudo class for <input>?

Thanks

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.