8

I added the HTML Form Web Part. And I added some code to Source Editor. I copied the code from W3Schools.

It is Animated Accordion code. But when I click the menu it is sliding down, but closing back immediately. Actually it must stay opened.

<!DOCTYPE html>
<html>
    <head>
        <style>
            button.accordion {
                background-color: #eee;
                color: #444;
                cursor: pointer;
                padding: 18px;
                width: 100%;
                border: none;
                text-align: left;
                outline: none;
                font-size: 15px;
                transition: 0.4s;
            }

            button.accordion.active, button.accordion:hover {
                background-color: #ddd;
            }

            button.accordion:after {
                content: '\002B';
                color: #777;
                font-weight: bold;
                float: right;
                margin-left: 5px;
            }

            button.accordion.active:after {
                content: "\2212";
            }

            div.panel {
                padding: 0 18px;
                background-color: white;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.2s ease-out;
            }
        </style>
    </head>

    <body>
        <h2>Accordion with symbols</h2>
        <p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
        <button class="accordion">Section 1</button>
        <div class="panel">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>

        <button class="accordion">Section 2</button>
        <div class="panel">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>

        <button class="accordion">Section 3</button>
        <div class="panel">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>

        <script>
            var acc = document.getElementsByClassName("accordion");
            var i;

            for (i = 0; i < acc.length; i++) {
              acc[i].onclick = function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.maxHeight){
                  panel.style.maxHeight = null;
                } else {
                  panel.style.maxHeight = panel.scrollHeight + "px";
                }
              }
            }
        </script>
    </body>
</html>
|improve this question
  • Your code seems to be correct. I don't see any issue. I think your code might be conflicting with the existing code on your page. It may be JS or CSS. – Rohit Waghela Sep 19 '17 at 11:31
  • Also check for any error messages in your console. – Rohit Waghela Sep 19 '17 at 11:31
  • What shows F12? – user37251 Sep 19 '17 at 11:34
  • Some warnings like this : DOM7011: The code on this page disabled back and forward caching. For more information, see: go.microsoft.com/fwlink/?LinkID=291337 PO1.aspx – f_gulay Sep 19 '17 at 11:37
4

Just try with content editor web part by editing the HTML Source `

<html>
<head>
<style>
div.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

div.accordion.active, div.accordion:hover {
    background-color: #ddd;
}

div.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

div.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<div class="accordion">Section 1</div>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="accordion">Section 2</div>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="accordion">Section 3</div>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    console.log("Testing")
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}
</script>

</body>
</html>`
|improve this answer
  • That's correct. So why did not work with html web part? what is the differences between html form web part and content editor ? – f_gulay Sep 19 '17 at 14:13
3

Try with the content editor or script editor webparts or else just create an HTML file, add that HTML file to your site assets, copy the link of the file, and place it in the content editor as shown in the picture:

Enter image description here

|improve this answer
  • That's correct. So why did not work with html web part? what is the differences between html form web part and content editor ? – f_gulay Sep 19 '17 at 14:20
1

You need to put the script types in you script tags i.e.

<script type="text/javascript"></script> and <style type="text/css"></style>

for it to render in your CEWP. Give that a shot. Your code looks fine. You also do not need <html> and <body> tags when using a CEWP. Everything in the CEWP is already within a <form> tag when it is rendered on the page.

Also, alway put you code like this in a txt file and reference it with a CEWP. Do not use the HTML editor in the web part from the ribbon. This puts it within the scope of the masterpage and can mess with your code. It is better practice to use a separate file for CEWP coding.

|improve this answer
0

Along with the other suggestions (remove the <body>, <html> tags and decorate your <script> and <style> tags appropriately), replace your <button> tags with <div> tags. That worked in my scenario using the W3C example. No further changes were required.

|improve this answer

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.