0

I am trying to create collapsible sections with header (clickable) and description (details about header) inside a SharePoint wiki page. There will be multiple such sections inside the wiki page. Is there a better approach available to achieve this? I tried to achieve this by adding a table of two rows (for each section). First row is marked as table header (click for show/hide section) and second is footer (description). Using JavaScript, tried to hide/show description while keeping the header for each table visible all the time. The problem is that when I click header of any of the tables, it will hide/show description for all the tables inside the wiki page on a single click no matter which section I click. This is because the header/footer class name is same for all the tables(with two rows only) I have inserted inside the wiki page.

Is there a way to make sure only a particular section is affected independently when clicked? Note that, the class name can't be changed since tables are being created inside SharePoint wiki page. following is the javascript i am using: the class names are same for all the tables inside the page.

<script>
$(document).ready(function(){
$(".ms-rteTableFooterRow-Default").hide();
$(".ms-rteTableHeaderRow-Default").show();

$(".ms-rteTableHeaderRow-Default").click(function(){
$(".ms-rteTableFooterRow-Default").slideToggle();
});
});</script>

Thanks in advance.

  • Inside header click function, find the closest and next footer row and then apply slide toggle on that instead of adding it on all footers. – Ganesh Sanap Nov 2 '18 at 1:15
  • Sadly, I'm not a javascript expert. Could you please help me with the code correction to apply slide toggle to closest footer? Thank you. – Vikash Joshi Nov 2 '18 at 12:24
0

You can achieve this using CSS and little bit javascrip code:

You need to convert your html content like given below:

<button class="ms-rteTableHeaderRow-Default">Section 1</button>
<div class="ms-rteTableFooterRow-Default">
  Div Contents
</div>

<button class="ms-rteTableHeaderRow-Default">Section 1</button>
<div class="ms-rteTableFooterRow-Default">
  Div Contents
</div>

<button class="ms-rteTableHeaderRow-Default">Section 1</button>
<div class="ms-rteTableFooterRow-Default">
  Div Contents
</div>

Then Use below CSS:

.ms-rteTableHeaderRow-Default {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .ms-rteTableHeaderRow-Default:hover {
  background-color: #ccc;
}

.ms-rteTableFooterRow-Default {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

Use below JavaScript:

$(document).ready(function(){
    var acc = document.getElementsByClassName("ms-rteTableHeaderRow-Default");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var footer = this.nextElementSibling;
        if (footer.style.maxHeight){
          footer.style.maxHeight = null;
        } else {
          footer.style.maxHeight = panel.scrollHeight + "px";
        } 
      });
    }
});

Make sure ms-rteTableHeaderRow-Default and ms-rteTableFooterRow-Default are sibling elements of each other.

Reference:

Collapsibles/Accordion.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.