Skip to Main Navigation. Each navigation link will open a list of sub navigation links.

Skip to Main Content

Apply to the University of Wyoming apply now

Global Resource Navigation

Visit Campus
Download UW Viewbook
Give to UW

CMS Help and Support

How to utilize 'Additional Code' option within the CMS:

This page wasn’t created to teach you JQuery, Grunt, Angular, JavaScript or any other JavaScript library or framework. It’s to help you use the functionality we’ve built into our site to accommodate those users that already know it and want to know how to implement functionality that a JavaScript library offers into their page.

I should point out, that regarding JavaScript frameworks, the site is up and ready with JQuery 2.1.1 out of the box. So there is no need to point to or upload that library. You can just start adding it to your page. That said, I will show you how to implement a simple JQuery “tab” element. So, let’s begin.

 

What we’re adding to the page:

additional code example
This is a result of JQuery code that allows the content editor to have tabbed information. We have something similar on the main UWYO home page. (Although at the time of writing this, there is only one element/tab)

 

The JQuery Code:

$(document).ready(function() {
    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});

This code would be added to a .js file and uploaded to your site. Best practices would have you put it in your “_files” folder. Maybe in a “scripts” folder inside there. Use the “Additional Code” element on your page to link to this file:

The CSS for the Tab Elements:

.tabs-menu {
    height: 30px;
    float: left;
    clear: both;
}

.tabs-menu li {
    height: 30px;
    line-height: 30px;
    float: left;
    margin-right: 10px;
    background-color: #ccc;
    border-top: 1px solid #d4d4d1;
    border-right: 1px solid #d4d4d1;
    border-left: 1px solid #d4d4d1;
}

.tabs-menu li.current {
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid #fff;
    z-index: 5;
}

.tabs-menu li a {
    padding: 10px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
}

.tabs-menu .current a {
    color: #2e7da3;
}

.tab {
    border: 1px solid #d4d4d1;
    background-color: #fff;
    float: left;
    margin-bottom: 20px;
    width: auto;
}

.tab-content {
    width: 660px;
    padding: 20px;
    display: none;
}

#tab-1 {
 display: block;  
}

This css should be placed in its own css file. Again, following best practices, upload it to your “_files” folder. Then, in keeping with the above recommendation, add a “css” folder and place it there. Use the “Additional Code” element on your page to link to this file:

 

The HTML Code:

<div id="tabs-container">

    <ul class="tabs-menu">
        <li class="current"><a href="#tab-1">Why UWYO</a></li>
        <li><a href="#tab-2">Student/Teacher Ratio</a></li>
        <li><a href="#tab-3">Quality Education</a></li>
        <li><a href="#tab-4">Life Elevated</a></li>
    </ul>

    <div class="tab">

        <div id="tab-1" class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Nullam pretium, est at congue mattis, nibh eros pharetra lectus, nec posuere libero dui consectetur arcu. Quisque convallis facilisis fermentum. Nam tincidunt, diam nec dictum mattis, nunc dolor ultrices ipsum, in mattis justo turpis nec ligula. Curabitur a ante mauris. Integer placerat imperdiet diam, facilisis pretium elit mollis pretium. Sed lobortis, eros non egestas suscipit, dui dui euismod enim, ac ultricies arcu risus at tellus. Donec imperdiet congue ligula, quis vulputate mauris ultrices non. Aliquam rhoncus, arcu a bibendum congue, augue risus tincidunt massa, vel vehicula diam dolor eget felis.</p>

        </div>

        <div id="tab-2" class="tab-content">
            <p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean tempor neque ut felis dignissim ac congue felis viverra. </p>       

        </div>

        <div id="tab-3" class="tab-content">
            <p>Duis egestas fermentum ipsum et commodo. Proin bibendum consectetur elit, hendrerit porta mi dictum eu. Vestibulum adipiscing euismod laoreet. Vivamus lobortis tortor a odio consectetur pulvinar. Proin blandit ornare eros dictum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur laoreet, ante aliquet molestie laoreet, lectus odio fringilla purus, id porttitor erat velit vitae mi. Nullam posuere nunc ut justo sollicitudin interdum. Donec suscipit eros nec leo condimentum fermentum. Nunc quis libero massa. Integer tempus laoreet lectus id interdum. Integer facilisis egestas dui at convallis. Praesent elementum nisl et erat iaculis a blandit ligula mollis. Vestibulum vitae risus dui, nec sagittis arcu. Nullam tortor enim, placerat quis eleifend in, viverra ac lacus. Ut aliquam sapien ut metus hendrerit auctor dapibus justo porta. </p>

        </div>

        <div id="tab-4" class="tab-content">
            <p>Proin sollicitudin tincidunt quam, in egestas dui tincidunt non. Maecenas tempus condimentum mi, sed convallis tortor iaculis eu. Cras dui dui, tempor quis tempor vitae, ullamcorper in justo. Integer et lorem diam. Quisque consequat lectus eget urna molestie pharetra. Cras risus lectus, lobortis sit amet imperdiet sit amet, eleifend a erat. Suspendisse vel luctus lectus. Sed ac arcu nisi, sit amet ornare tellus. Pellentesque nec augue a nibh pharetra scelerisque quis sit amet felis. Nullam at enim at lacus pretium iaculis sit amet vel nunc. Praesent sapien felis, tincidunt vitae blandit ut, mattis at diam. Suspendisse ac sapien eget eros venenatis tempor quis id odio. Donec lacus leo, tincidunt eget molestie at, pharetra cursus odio. </p>

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

The HTML code will be passed into your WYSIWYG section where you want your element to appear on your page. In this screen shot, I’ve clicked the “<>” tab in the WYSIWYG editor to display the prompt (this is the source code, formerly within the CMS has the "HTML tab"). I’ve then pasted in my html code.

HTML Code


Share This Page:

Contact Us

Institutional Marketing

Website support team

Email: UserHelp@uwyo.edu

1000 E. University Ave. Laramie, WY 82071
UW Operators (307) 766-1121 | Contact Us | Download Adobe Reader

Twitter Icon Youtube Icon Instagram Icon Facebook Icon

Accreditation | Emergency Preparedness | Employment at UW | Gainful Employment | Privacy Policy | Accessibility Accessibility information icon