Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools

Ryan Hellerud
Ryan Hellerud
3,635 Points
Posted by Ryan Hellerud
Ryan Hellerud
3,635 Points

What tools will help me accomplish the following task better?

So Here is the deal. I am working on a website for a public charter school. They have about 100+ separate classes that each need about 20 individual files to be accessible to the web site, so lets say about 2k in total giver or take. Right now, they had a very static html basic. Anyway the foundation code im using to make the site really cool is pretty detailed and has all individual ids and panels im wondering if there is a way for me to stream line the process so i dont basically become a data-entry person while im building the site. here is some foundation code for the interactive accordion im using. And all the ids and links will have to be put in.

Basically, Ill need to reproduce the following text about 100+ times each with specific id's for the panels and links for the 20 files. How can i do this with an extension easier, and what extensions would help me. Thanks

 <dl class="accordion accorborder" data-accordion>
        <dd class="accordion-navigation">
            <a href="#p1">ENGLISH 9 Common Core Semester 1</a>
            <div id="p1" class="content">
               <div class="row">
                   <div class="small-6 columns">
                        <h6>Code:</h6>HS-ES-113 
                        <h6>Grade Level:</h6> 9
                   </div>
                   <div class="small-6 columns">

                       <h6>Course Materials:</h6> 
                       <ul>
                           <li>
                               <a href="#">Syllabus</a>
                           </li>
                           <li>
                               <a href="#">Course Contract</a>
                           </li>
                           <li>
                               <a href="#">White Board</a>
                           </li>
                       </ul>
                   </div>
               </div> 
                <p>Iclass text here
                </p>
<!--                Panels-->
        <dl class="tabs" data-tab>
        <dd class="active"><a href="#panel2-1">Study Sheets</a></dd>
        <dd><a href="#panel2-2">Study Sheets Answer Keys</a></dd>
        <dd><a href="#panel2-3">Graded Assignments</a></dd>
        <dd><a href="#panel2-4">Graded Assignment Answer Keys</a></dd>
      </dl>
      <div class="tabs-content">
        <div class="content active" id="panel2-1">
              <ul class="ss">
              <li><a href="#">Unit One</a></li>
              <li><a href="#">Unit Two</a></li>
              <li><a href="#">Unit Three</a></li>
              <li><a href="#">Unit Four</a></li>
              <li><a href="#">Unit Five</a></li>

              </ul>
        </div>
        <div class="content" id="panel2-2">
          <ul class="ssa">
              <li><a href="#">Unit One</a></li>
              <li><a href="#">Unit Two</a></li>
              <li><a href="#">Unit Three</a></li>
              <li><a href="#">Unit Four</a></li>
              <li><a href="#">Unit Five</a></li>

              </ul>
        </div>
        <div class="content" id="panel2-3">
          <ul class="ga">
              <li><a href="#">Unit One</a></li>
              <li><a href="#">Unit Two</a></li>
              <li><a href="#">Unit Three</a></li>
              <li><a href="#">Unit Four</a></li>
              <li><a href="#">Unit Five</a></li>

         </ul>
        </div>
        <div class="content" id="panel2-4">
          <ul class="gaa">
              <li><a href="#">Unit One</a></li>
              <li><a href="#">Unit Two</a></li>
              <li><a href="#">Unit Three</a></li>
              <li><a href="#">Unit Four</a></li>
              <li><a href="#">Unit Five</a></li>

              </ul>
        </div>
      </div>       
            </div>

1 Answer

Ron McCranie
Ron McCranie
7,837 Points
Ron McCranie
Ron McCranie
7,837 Points

As with most projects there are many ways to accomplish the same task. You mentioned they have a static site, are you making a static sites as well? My fist intuition is to go with a dynamic solution. Any server-side language could do a loop and increment the id each time. Javascript could do it as well. You could use knockout.js or angular.js if you didn't want to mess with something server side. I hope this helps.

Ryan Hellerud
Ryan Hellerud
3,635 Points
Ryan Hellerud
Ryan Hellerud
3,635 Points

Thanks for the reply. I am trying to make it more dynamic and using javascript and php. The only php im using now is to include the header and footer files but welcome any ideas for automating. As far as a loop to increment ids, it sounds like a good idea but how complicated would it be? Each class will have its own files and content associated with it.