We Keep Coding

Only display one section of content at a time without stacking on itself?

I'm having trouble only displaying my content within one section of my nav bar at a time. Currently, as you can see it's showing the active content clothing1 nicely but when I click clothing2 I want clothing1 to be hidden and the content of clothing2 is shown, and so on.
I don't want the content to stack on top of itself if that makes sense.
document.getElementById('nav_clothing').addEventListener('click', function(){
var secClothing = document.getElementById('sec-clothing');
if( getComputedStyle(secClothing,null).display=='none') secClothing.style.display='block';
else secClothing.style.display='none';
}, false);
<!-- start of list content -->
<ul class="navigation-bar navigation-bar-left">
<li class="active">clothing 1</li>
<li>clothing 2</li>
<li>clothing 3</li>
<li>clothing 4</li>
<li>clothing 5</li>
</ul>
<!-- end of list content -->
<!-- content when list expands -->
<section id="sec-clothing">
<div class="grid-item">
<h2>Test content </h2>
</div>
<div class="grid-item">
<img src="test.svg" class="headerbarcode" id="headerbarcode" alt="test image 1">
</div>
<div class="grid-item">
<img src="test2.svg" class="headertext" id="headertext" alt="test image 2">
</div>
</section>
<!-- end of content when list expands -->

css selector for visible only first section content

I have a JavaScript toggle so T need to tried to collapse all sections on load by default - by inserting
ul.section-content{
display:none;
}
and it is working. But when I tried to hide first-child or not first-child it is not working.
.cscr .csec .section ul:first-of-type {
display: none;
}
<div class="cscr">
<ul class="csec">
<li class="section">
<div class="section-header">
<div class="section-left">
<h5>section01</h5>
<p>hello1</p>
</div>
<div class="section-meta">
</div>
</div>
<ul class="section-content">
<li class="course-item">
<h1>lesson01</h1>
</li>
</ul>
</li>
<li class="section">
<div class="section-header">
<div class="section-left">
<h5>section02</h5>
<p>hello1</p>
</div>
<div class="section-meta">
</div>
</div>
<ul class="section-content"> /* to hide this */
<li class="course-item">
<h1>lesson02</h1>
</li>
</ul> /* to hide this */
</li>
</ul>
</div>
second case:
and how to display only first and not others with help of not-first-child
screenshot of what is needed

Do you want something like this? https://codepen.io/anon/pen/YOOXOv. Change the CSS properties to whatever you want.
Here you are selecting all sections except the first one and then selecting ul inside them.

isotope filter - prevent "selected" category from loading all images

I've tried the suggested fixes on Stack Overflow but can't seem to fix my issue. I'm trying to get a "selected" category to keep from loading all the images on page load. I've tried to remove the "Show All" line but that does not help. I believe this to be a js problem.
Here's my html and js:
HTML:
<div id="isotope-options">
<ul id="isotope-filters" class="clearfix">
<li>Show All</li>
<li>Recital Photos</li>
<li>Home Photos</li>
<li>Recital Videos</li>
</ul>
</div>
JS:
I couldn't fit all the js here, so here's a link:
isotope filter js
Here's the code you requested:
<li class="span3 isotope-element isotope-filter2">
<div class="thumb-isotope">
<div class="thumbnail clearfix">
<a href="gallery_images/recital_pics/1pm hippie group.jpg">
<div class="banner_inner">
<div class="banner_inner2">
<figure>
<img src="gallery_images/recital_pics/1pm hippie group - sm.jpg" alt=""><em></em>
</figure>
<div class="caption">
Group 1
</div>
</div>
</div>
<img src="images/banner_shadow.png" alt="" class="banner_shadow">
</a>
</div>
</div>
</li>

You can filter using this
$grid.isotope({ filter: '.selected' });

Angular-Foundation directives do not work

I am trying to use Angular-Foundation-http://pineconellc.github.io/angular-foundation/ but it does not seem to be working. The sample itself is what I am testing (after I tried it on my own app, and it failed there also.)
Here is the plunker - http://plnkr.co/edit/?p=preview
The problem is when you click the hamburger menu icon it does not display the menu. I am not sure even how to debug the problem to figure out what is wrong. I do know if i remove the mm.foundation service it will begin to work, but then it is only foundation, no more angular directives.
Thanks!
More information found in plunker:
HTML:
<div ng-controller="OffCanvasDemoCtrl">
<div class="off-canvas-wrap">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">OffCanvas</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" ><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Left Sidebar</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li>Right Sidebar</li>
</ul>
</aside>
<section class="main-section">
<div class="small-12 columns">
<h1>How to use</h1>
<p>Just use the standard layout for an offcanvas page as documented in the foundation docs</p>
<p>As long as you include mm.foundation.offcanvas it should simply work</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
</div>
Javascript:
angular.module('plunker', ['mm.foundation']);
angular.module('foundationDemoApp').controller('OffCanvasDemoCtrl', function ($scope) {
});

Screenreader NVDA can´t read content that is createt by angularjs repeat-directive

<!-- <section ng-controller="problemDatabaseController">
<h4 >Aktuelle Probleme (aus Datenbank):</h4>
<ul>
<h1>{{problem.description}}</h1>
<li class="problem" ng-repeat="problem in probleme">
<p class="problemName">{{problem.description}}</p>
Status: {{problem.created}}.
<p class="problemBeschreibung">Problembeschreibung: {{problem.title}}</p>
<ul>
<li class="tag" ng-repeat="tag in problem.tags">{{tag.name}
</li>
</ul>
</li>
</ul>
</section>
If this is rendered, for instance the h1-tag is always unreadable because it is empty and all the other content too.
Is there anyway to make it readable for screenreaders?