<ul class="side-nav">
    <li class="js-accordion-nav-item side-nav__item side-nav__item--level1 side-nav__item--has-children">Overview</li>
    <ul class="js-accordion-subnav-items side-nav__sub-container">
        <li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">1</a></li>
        <li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">2</a></li>
        <li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">3</a></li>
    </ul>
    <li class="js-accordion-nav-item side-nav__item side-nav__item--level1 side-nav__item--has-children">Performance</li>
    <ul class="js-accordion-subnav-items side-nav__sub-container">
        <li class="js-accordion-nav-item side-nav__item side-nav__item--level2 side-nav__item--has-children">level 2 - 1</li>
        <ul class="js-accordion-subnav-items side-nav__sub-container">
            <li class="side-nav__item side-nav__item--level3"><a class="side-nav__link" href="#">level 3 - 1</a></li>
            <li class="side-nav__item side-nav__item--level3"><a class="side-nav__link" href="#">level 3 - 2</a></li>
            <li class="side-nav__item side-nav__item--level3"><a class="side-nav__link" href="#">level 3 - 3</a></li>
        </ul>
        <li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">level 2 - 2</a></li>
        <li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">level 2 - 3</a></li>
    </ul>

    <li class="js-accordion-nav-item side-nav__item side-nav__item--level1 side-nav__item--has-children">Governance</li>
    <ul class="js-accordion-subnav-items side-nav__sub-container">
        <li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">1</a></li>
        <li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">2</a></li>
        <li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">3</a></li>
    </ul>
    <li class="js-accordion-nav-item side-nav__item side-nav__item--level1 side-nav__item--has-children">Policies</li>
    <ul class="js-accordion-subnav-items side-nav__sub-container">
        <li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">Policies overview</a></li>
        <li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">Patients: Pre-clinical testing</a></li>
        <li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">R&amp;D: Stem Cells</a></li>
        <li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">Conflict Minerals</a></li>
        <li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">HSE Policy</a></li>
    </ul>
    <li class="side-nav__item side-nav__item--level1"><a class="side-nav__link" href="#">Contact us</a></li>
</ul>
<ul class="side-nav">
	<li class="js-accordion-nav-item side-nav__item side-nav__item--level1 side-nav__item--has-children">Overview</li>
	<ul class="js-accordion-subnav-items side-nav__sub-container">
		<li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">1</a></li>
		<li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">2</a></li>
		<li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">3</a></li>
	</ul>
	<li class="js-accordion-nav-item side-nav__item side-nav__item--level1 side-nav__item--has-children">Performance</li>
	<ul class="js-accordion-subnav-items side-nav__sub-container">
		<li class="js-accordion-nav-item side-nav__item side-nav__item--level2 side-nav__item--has-children">level 2 - 1</li>
		<ul class="js-accordion-subnav-items side-nav__sub-container">
			<li class="side-nav__item side-nav__item--level3"><a class="side-nav__link" href="#">level 3 - 1</a></li>
			<li class="side-nav__item side-nav__item--level3"><a class="side-nav__link" href="#">level 3 - 2</a></li>
			<li class="side-nav__item side-nav__item--level3"><a class="side-nav__link" href="#">level 3 - 3</a></li>
		</ul>
		<li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">level 2 - 2</a></li>
		<li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">level 2 - 3</a></li>
	</ul>

	<li class="js-accordion-nav-item side-nav__item side-nav__item--level1 side-nav__item--has-children">Governance</li>
	<ul class="js-accordion-subnav-items side-nav__sub-container">
		<li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">1</a></li>
		<li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">2</a></li>
		<li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">3</a></li>
	</ul>
	<li class="js-accordion-nav-item side-nav__item side-nav__item--level1 side-nav__item--has-children">Policies</li>
	<ul class="js-accordion-subnav-items side-nav__sub-container">
		<li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">Policies overview</a></li>
		<li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">Patients: Pre-clinical testing</a></li>
		<li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">R&amp;D: Stem Cells</a></li>
		<li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">Conflict Minerals</a></li>
		<li class="side-nav__item side-nav__item--level2"><a class="side-nav__link" href="#">HSE Policy</a></li>
	</ul>
	<li class="side-nav__item side-nav__item--level1"><a class="side-nav__link" href="#">Contact us</a></li>
</ul>
/* No context defined for this component. */
.side-nav {
	background-color: $white;
	padding: 0.15em;
}
.side-nav__item {
	position: relative;
	cursor: pointer;
	padding: 0.5em;
	font-family: 'smithnephewlfbold';
}
.js .side-nav__item--has-children {
	cursor: pointer;
	position: relative;
	background-image: url('/assets/icons/arrow-down-grey.png');
	background-image: url('/assets/icons/arrow-down-grey.svg');
	background-repeat: no-repeat;
	background-position: center right;
	padding-right: 2.5em;
	background-size: 18px;
	background-position-x: 98%;
}
.js .side-nav__item--has-children--active {
	cursor: pointer;
	position: relative;
	background-image: url('/assets/icons/arrow-up-darkgrey.png');
	background-image: url('/assets/icons/arrow-up-darkgrey.svg');
	background-repeat: no-repeat;
	background-position: center right;
	padding-right: 2.5em;
	background-size: 18px;
	background-position-x: 98%;
}
.side-nav__item--level1 {
	border-bottom: 1px solid $grey--superlight;
}
.side-nav__item--level2 {
	background-color: $grey--light;
}
.side-nav__link {
	display: block;
	color: $grey--superdark;
}
$(document).ready(function() {
	var allItems = $('.js-accordion-subnav-items').hide();
    $('.js-accordion-nav-item').on('click', function () {
        $this = $(this),
        $target = $this.next();
        if (!$target.hasClass('side-nav__sub-container--active')) {
        	$this.addClass('side-nav__item--has-children--active');
        	$this.siblings('.js-accordion-nav-item').removeClass('side-nav__item--has-children--active');
            $this.parent().children('.js-accordion-subnav-items').removeClass('side-nav__sub-container--active').slideUp();
            $target.addClass('side-nav__sub-container--active').slideDown();
        }
        return false;
    });
});

There are no notes for this item.