CSS show/hide div on-click in SharePoint 2007

Question

I'm trying to save page length in SharePoint by having a list of links that expose corresponding copy directly below them onto the page.

I have this working great outside of SharePoint thanks to the labels solution in this question and once in SP it works fine in Chrome but the hidden divs don't expand when the links are clicked in IE11.

To get around SP stripping the formatting away I created a .txt file containing the CSS and HTML and uploaded it to the sites style library. Then linked to it in a Content Editor Webpart. you can see what I'm using in the demo.

I'd like a solution without using JQuery as I'm not sure if we can use it within our internal enviroment (I've asked if we can but haven't heard back yet) It seems logical that there must be a simple way to do this within SP itself or SharePoint Designer or CSS without the above issue?

.artifact_top
{padding:10px;border:1px solid lightgrey;margin:10px;overflow:auto;}

.collapse{
  cursor: pointer;
  display: block;
  color: #6490d6;
text-decoration: none;
}

.collapse:hover{

text-decoration: underline;
}

.collapse + input{
  display: none; /* hide the checkboxes */
}
.collapse + input + div{
  display:none;
}
.collapse + input:checked + div{
  display:block;
}

table
{border-collapse:separate;width:100%;border:none;}
td
{padding-left:10px;padding-top:10px;vertical-align:top;}

<div style="float: right; width: 35%; padding-left: 5%;"><div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong style="font-size: 13.3333px;">Implementation</strong><strong>&#160;Artifacts</strong></div>
<br/>
<span class="ms-rteFontSize-1">This topic provides you a list of the artifacts and supporting documentation related to&#160;<span>Implementation</span>. Artifacts with an asterisk are required for all projects.</span>


<br/><br/>

<div><label class="collapse" for="_1">Final Implementation Plan*</label>
<input id="_1" type="checkbox"/>
<div class="artifact_top">The Implementation Plan identifies tasks, owners, timeline, and communication for IT components of the Implementation phase.<br/><br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project manager">PM</a></td>
    <td width="50%"><strong>Template</strong><br/>View the <a href="https://webconnect.wyn.com/divisions/it/techcomm/repository/IT%20Documents/Implementation%20Plan.xls">Implementation Plan template</a>.</td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/>Delivery Lead, PM, Release Manager</td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody>
</table>
</div>
</div>
<br/>


<div><label class="collapse" for="_2">Operational Readiness Review (ORR)*</label>
<input id="_2" type="checkbox"/>
<div class="artifact_top">The Operational Readiness Review is a checklist to ensure all required documentation listed within the ORR is completed.<br/><br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/>App Services</td>
    <td width="50%"><strong>Template</strong><br/>View the <a href="https://webconnect.wyn.com/divisions/it/techcomm/repository/IT%20Documents/Operational%20Readiness%20Review.xlsx">Operational Readiness Review template</a>.</td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/>App Services</td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody>
</table>
</div>
</div>
<br/>

<div><label class="collapse" for="_3">System/Application Documentation*</label>
<input id="_3" type="checkbox"/>
<div class="artifact_top">The System/Application Documentation consolidates content about the system/application, which backend users can use to determine how that system/application is designed and functions. <br/><br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/>TechComm</td>
    <td width="50%"><strong>Template</strong><br/>N/A</td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/>IT Configuration Management</td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody>
</table>
</div>
</div>
<br/>

</div>

Answer 1

pure css and html, nice work!

have you the possibility to add a meta into the header?

see / try the ie=edge meta: What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?

we got a lot of issues with our sharepoint / our ie version on our workmachines - css styles are ignored, scripts not working etc.

are the contents always hidden and the click has no effect or are they alwasy visible?

Answer 2

To support some advanced functionality in Internet Explorer, SharePoint 2010 uses some ActiveX controls that are only available in IE8. SharePoint forces Internet Explorer 11 into compatibility view to emulate Internet Explorer 8, essentially downgrading your version of IE.

Unfortunately, the input:checked CSS selector was introduced with CSS 3 and was not yet available in Internet Explorer 8.

As an alternative, you can use a click event handler in JavaScript to toggle the visibility of the divs. JavaScript can be entered into the same .txt file as your CSS and HTML (enclosed within <script> tags). If you put the JavaScript below your HTML, it will not execute until the preceding HTML is loaded by the browser, allowing you to query and reference the preceding HTML elements in your script.

<script>
var labels = document.querySelectorAll(".collapse"); // get all labels
for(var i = 0; i < labels.length; i++){
    var label = labels[i];
    (function(div){
        label.onclick = function(){
            if(div.style.display == "block"){
                div.style.display = "none";
            }else{
                div.style.display = "block";
            }
        };
    })(label.parentNode.querySelector("div"));
}
</script>

var labels = document.querySelectorAll(".collapse"); // get all labels
for (var i = 0; i < labels.length; i++) {
  var label = labels[i];
  (function(div) {
    label.onclick = function() {
      if (div.style.display == "block") {
        div.style.display = "none";
      } else {
        div.style.display = "block";
      }
    };
  })(label.parentNode.querySelector("div"));
}

.collapse {
  cursor: pointer;
  display: block;
  color: #6490d6;
  text-decoration: none;
}
.collapse:hover {
  text-decoration: underline;
}
.collapse + input {
  display: none;
  /* hide the checkboxes */
}
.collapse + input + div {
  display: none;
}
table {
  border-collapse: separate;
  width: 100%;
  border: none;
}
td {
  padding-left: 10px;
  padding-top: 10px;
  vertical-align: top;
}
.artifact_top {
  padding: 10px;
  border: 1px solid lightgrey;
  margin: 10px;
  overflow: auto;
}

<div style="float: right; width: 35%; padding-left: 5%;">
  <div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong style="font-size: 13.3333px;">Implementation</strong><strong>&#160;Artifacts</strong>
  </div>
  <br/>
  <span class="ms-rteFontSize-1">This topic provides you a list of the artifacts and supporting documentation related to&#160;<span>Implementation</span>. Artifacts with an asterisk are required for all projects.</span>


  <br/>
  <br/>

  <div>
    <label class="collapse" for="_1">Final Implementation Plan*</label>
    <input id="_1" type="checkbox" />
    <div class="artifact_top">The Implementation Plan identifies tasks, owners, timeline, and communication for IT components of the Implementation phase.
      <br/>
      <br/>

      <table>
        <tbody>
          <tr>
            <td width="50%"><strong>Artifact Owner</strong>
              <br/><a href="#" title="Project manager">PM</a>
            </td>
            <td width="50%"><strong>Template</strong>
              <br/>View the <a href="https://webconnect.wyn.com/divisions/it/techcomm/repository/IT%20Documents/Implementation%20Plan.xls">Implementation Plan template</a>.</td>
          </tr>
          <tr>
            <td width="50%"><strong>Approver</strong>
              <br/>Delivery Lead, PM, Release Manager</td>
            <td width="50%"><strong>Sample</strong>
              <br/>N/A</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <br/>


  <div>
    <label class="collapse" for="_2">Operational Readiness Review (ORR)*</label>
    <input id="_2" type="checkbox" />
    <div class="artifact_top">The Operational Readiness Review is a checklist to ensure all required documentation listed within the ORR is completed.
      <br/>
      <br/>

      <table>
        <tbody>
          <tr>
            <td width="50%"><strong>Artifact Owner</strong>
              <br/>App Services</td>
            <td width="50%"><strong>Template</strong>
              <br/>View the <a href="https://webconnect.wyn.com/divisions/it/techcomm/repository/IT%20Documents/Operational%20Readiness%20Review.xlsx">Operational Readiness Review template</a>.</td>
          </tr>
          <tr>
            <td width="50%"><strong>Approver</strong>
              <br/>App Services</td>
            <td width="50%"><strong>Sample</strong>
              <br/>N/A</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <br/>

  <div>
    <label class="collapse" for="_3">System/Application Documentation*</label>
    <input id="_3" type="checkbox" />
    <div class="artifact_top">The System/Application Documentation consolidates content about the system/application, which backend users can use to determine how that system/application is designed and functions.
      <br/>
      <br/>

      <table>
        <tbody>
          <tr>
            <td width="50%"><strong>Artifact Owner</strong>
              <br/>TechComm</td>
            <td width="50%"><strong>Template</strong>
              <br/>N/A</td>
          </tr>
          <tr>
            <td width="50%"><strong>Approver</strong>
              <br/>IT Configuration Management</td>
            <td width="50%"><strong>Sample</strong>
              <br/>N/A</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <br/>

</div>