Extending Moodle Using HTML (Part 2)

Click here to read Part 1 on modals and collapsible accordions.

Tabs

Tabs are a navigation aid that allows multiple pieces of content to be displayed on one page side by side, which enables the student to navigate easily from one piece of content to another without needing to scroll. Horizon has chosen to use tabs on the homepage of many of its courses to display essential information such as the course description, the course objectives, and the copyright information.

Tabs code

To add tabs to your course, simply copy and paste the following code snippet into the HTML source editor in the desired location in the course:    

<!– Nav tabs –>
<ul class=”nav nav-tabs” style=”list-style-type: none;”>
 <li class=”nav-item active”>
    <a class=”nav-link active” data-toggle=”tab” href=”#tab1″>Tab 1</a>
 </li>
  <li class=”nav-item”>
   <a class=”nav-link” data-toggle=”tab” href=”#tab2″>Tab 2</a>
  </li>
  <li class=”nav-item”>
    <a class=”nav-link” data-toggle=”tab” href=”#tab3″>Tab 3</a>
  </li>
</ul>
<!– Tab panes –>
<div class=”tab-content”>
 <div class=”tab-pane active” id=”tab1″><p>Some content for tab 1.</p></div>
 <div class=”tab-pane fade” id=”tab2″><p>Some content for tab 2.</p></div>
  <div class=”tab-pane fade” id=”tab3″><p>Some content for tab 3.</p></div>
</div>
<hr style=”background-color: #ddd; width: 100%; height: 1px; border: 0;”>

As has been the case with the other features mentioned in Part 1 of this post, each tab is given a name (e.g. Course Objectives) and is populated with content. To customize the names of the tabs you wish to use in your course, simply replace the text in orange in the “Nav tabs” section with names of your own. To customize the content of each tab, replace the orange text in the “Tab panes” section with the content you wish to add. 

Tabs example with pills

Pills are a navigation aid that are used with tabs to give them a different look and feel. Since the function of the pill feature is like that of the tab feature, the process for adding them to your course is essentially the same. Begin by copying and pasting the following snippet into your HTML source editor:

<!– Nav pills –>
<ul class=”nav nav-pills”>
  <li class=”nav-item active”>
   <a class=”nav-link” data-toggle=”pill” href=”#pill1″>Pill 1</a>
  </li>
  <li class=”nav-item”>
    <a class=”nav-link” data-toggle=”pill” href=”#pill2″>Pill 2</a>
  </li>
  <li class=”nav-item”>
 <a class=”nav-link” data-toggle=”pill” href=”#pill3″>Pill 3</a>
 </li>
</ul>
<!– Pill panes –>
<div class=”tab-content”>
  <div class=”tab-pane active” id=”pill1″><p>Some content for pill 1.</p></div>
 <div class=”tab-pane fade” id=”pill2″><p>Some content for pill 2.</p></div>
  <div class=”tab-pane fade” id=”pill3″><p>Some content for pill 3.</p></div>
</div>

Once you have done that, you will have to replace the orange text in the “Nav Pills” section with the names that you wish to give to each pill. Then, replace the orange text in the “Pill panes” section with the content that you would like to appear for each pill. When you are finished, don’t forget to save your changes.