Create collapsible panel based on a table values Javascript

Question

I'm trying to create a separate panel automatically based on a table. I have a job list, I want the panel header to be my jobName field, and I want the panel content to be my jobDescription field. We have about 30 jobs that I need to display and rather than coding each panel, I would like to use javascript to automatically create each panel. The jobs change and our staff know how to update the jobs, but i'm trying to display them in a bootstrap accordion panel.

I'm newish to java script and everything I've tried has not worked.

Below is what i'm trying to accomplish automatically

jobsPanels

Answer 1

I'm going to assume your data is stored in a remote place to allow editing by third parties, and that you're using jQuery if you have bootstrap on your page.

First, you would need some way to get the remote data to the client. jQuery has some convenient methods to do so. If your data is accessible in JSON format, you could take a look at $.getJSON , otherwise you will have to fiddle around with $.ajax .

Then, all you have to do is put the data on the page, by doing some HTML building fun and appending the results to your container. If you get the markup right, the bootstrap accordion functionality should work out of the box.

This is as specific as I could get without seeing some code or knowing your implementation, but this would be the general way to achieve what you want.

Answer 2

You will need a list of some sort containing jobNames and jobDescriptions. This can be stored in JSON or an array. Then by looping through the data you can dynamically append each panel to the accordion container by first building out the html string for each panel and attaching the jobNames and jobDescriptions. I've made an example on jsfiddle - https://jsfiddle.net/7ayh8ppd/12/ `

        <div class="panel-group" id="accordion">

        </div> 


    <script>

        var jobList = ["Job1", "Job2", "Job3", "Job4", "Job5"];
        var html = ""

        $.each(jobList, function (index, value) {

            html += "<div class=\"panel panel-default\">";
            html += "       <div class=\"panel - heading\">";
            html += "           <h4 class=\"panel - title\">";
            html += "               <a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse"+index+1+"\">"+value+"</a>";
            html += "           </h4>";
            html += "       </div>";
            html += "       <div id=\"collapse"+index+1+"\" class=\"panel - collapse collapse\">";
            html += "           <div class=\"panel - body\">Lorem ipsum dolor sit amet, consectetur adipisicing elit,";
            html += "               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,";
            html += "               quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>";
            html += "       </div>";
            html += "   </div>";

        });

        $("#accordion").append(html);

    </script>`