locked
drop down list of steps RRS feed

  • Question

  • I'm wondering if it's possible to create a topic name heading that someone can click on and the steps will then appear below. We do not want to create a drop down list. We want the steps to a process to appear after clicking on the title.

    Let me know if that doesn't make sense!

    Thanks!

    Thursday, May 26, 2016 7:14 PM

Answers

  • One of the option is to achieve it through the JavaScript.

    Click on expand , shows the steps and collapse hides the steps.

    Add the below script to script editor webpart in the page.

    <style>
    .container {
      width: 100%;
      border: 1px solid #d3d3d3;
    }
    .container div {
      width: 100%;
    }
    .container .header {
      background-color: #d3d3d3;
      padding: 2px;
      cursor: pointer;
      font-weight: bold;
    }
    .container .content {
      display: none;
      padding: 5px;
    }
    </style>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready (function () {
    $(".header").click(function() {
      $header = $(this);
      $content = $header.next();
      $content.slideToggle(500, function() {
        $header.text(function() {
          return $content.is(":visible") ? "Collapse" : "Expand";
        });
      });
    });
    });
    
    </script>
    <div class="container">
      <span>Read more about the steps here</span>
      <div class="header"><span>Expand</span>
      </div>
      <div class="content">
    <ul>
    <li>Step1.....</li>
    <li>Step2.....</li>
    <li>Step3.....</li>
    <li>Step4.....</li>
    </ul>
      </div>
    </div>
    


    ---
    Rajesh
    rjesh.com| @rjesh
    You don't need to buy me a beer, if helpful just smile, vote, and mark it as answer.

    Thursday, May 26, 2016 7:34 PM