dnestoff
9/20/2016 - 1:22 PM

Javascript: Tabbed navigation

tabbed_navigation.js
content_copyfile_download
//https://github.com/chi-wolves-2016/behavior-drill-tabbed-interface-challenge/blob/pair-dnestoff%2Cmark-mcl/tabs.css

//change active tab and show/hide content when clicked

$(document).ready(function () {
  $("#integrity").show()
  $(".tabs li").click(function (event) {
    event.preventDefault();
    $(".tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab-content").hide();
    selected_tab_content = $(this).children("a").attr("href");
    $(selected_tab_content).show();
  });
});
tabbed_navigation.html
content_copyfile_download
<!DOCTYPE html>
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by jessefarmer</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

  <link rel="stylesheet" type="text/css" href="tabs.css" />
  <script type="text/javascript" src="tabs.js"></script>
</head>
<body>
  <div class="container">
    <h1>Tab Demo</h1>

    <ul class="tabs">
        <li class="active"><a href="#integrity">Integrity</a></li>
        <li><a href="#kindness">Kindness</a></li>
        <li><a href="#whole_self">Whole Self</a></li>
    </ul>

    <div class="tab-content" id="integrity">
      <h2>Integrity</h2>
      <p>In simplest form, this means being honest. One way to embody integrity is "doing the right thing even when no one is watching."</p>
      <p>At Dev Bootcamp, we are asking you to do a crazy thing: to learn how to be a web developer within a matter of weeks. For you to reach this goal, we need everyone to work together, follow our methodology, and agree to adhere to the rules and guidelines that have made Dev Bootcamp successful.</p>
      <p>At Dev Bootcamp, we have codes of conduct that support an optimal learning environment and ensure that everyone gets the most out of the program. We expect you to be in integrity with:
        <ul>
          <li>Showing up on time</li>
          <li>Working through the challenges each week</li>
          <li>Communicating with your accountability group when you are struggling</li>
          <li>Pairing with others</li>
          <li>Asking for help and asking questions</li>
          <li>Submitting and rating feedback</li>
          <li>Going through the entire process outlined in each challenge</li>
        </ul>
      </p>
  <p>Part of being in integrity also means that when you fall out of it for whatever reason (such as being a human being) you own up to it. Most of the time all it takes is and acknowledgment of being out of integrity and everybody can move on.</p>
    </div>

    <div class="tab-content" id="kindness">
      <h2>Kindness</h2>
      <p>We also expect every person to be kind to one another. Kindness does not mean "nice"; they are actually not the same thing. Being kind does mean being friendly, generous, and considerate, but it does not preclude giving constructive, truthful feedback as long as it is <strong>A</strong>ctionable, <strong>S</strong>pecific, and <strong>K</strong>ind (ASK).</p>
      <p>We expect all students and staff to show kindness by providing feedback and code reviews to one another, informing one another when someone has fallen out of integrity, and by bringing ourselves 100% into every day. We also show kindness through showing respect to others and our space.</p>
      <p>Last but not least, we expect you to be kind to yourself. You've taken a big risk and are making a big change. Give yourself some space and understanding as you face the challenges of our program.</p>
    </div>

    <div class="tab-content" id="whole_self">
      <h2>Whole Self</h2>
      <p>We expect you to bring your intelligence, your focus, your creativity, and your personality into each challenge every day. If you are struggling, we expect you to ask others (including staff) for help. If you find that you're holding some part of you back from this experience, we ask that you focus on being authentic with your pair, your cohort, and staff. DBC flourishes when all of us feel safe being authentic with each other.</p>
      <p>This includes exposing your ignorance and being open to uncomfortable emotional and technical challenges at DBC.</p>
      <p>We expect everyone to complete the assigned challenges, but we want to reinforce that it's not about completing the challenge if nothing is learned. The DBC experience is fundamentally about <em>learning</em>. We expect you to demonstrate effort and mastery of each learning competency by completing the challenges.</p>
    </div>
</div>

</body>
</html>
Tabbed_navigation.css
content_copyfile_download
.tab-content {
    display: none;
}
.tabs {
    float: left;
    border-bottom: 1px solid #ccc;
    width: 100%;
    margin-bottom: 16px;
    list-style: none;
}
.tabs li {
    float: left;
    margin-right: 16px;
    padding: 10px 15px;
    height: 30px;
    line-height: 30px;
}
.tabs li a {
    color: #666;
    font-family: Helvetica, Arial, sans-serif;
    text-decoration: none;
}

/*
  To get the "tab" effect, we have to cover up the grey border of the ul element
  To do this, we make the list item one pixel taller, give it a negative 1px bottom margin,
  and give it a 1px white bottom border.  This keeps the list item the same overall height,
  but "nudges" it down 1px so its white border covers the ul's grey border
  We also have to juggle with the margin to compensate for the new borders on the top, left, and right.
*/

.tabs li.active {
    border: 1px solid #ccc;
    border-bottom: 1px solid white;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-bottom: -1px;
    height: 31px;
    padding: 9px 14px;
}

.tabs li.active a {
    color: black;
    text-decoration: none;
    border-bottom: none;
}