Accordeon expand collapse, one more option - html

Question

I'm trying to make a responsive menu for the cellphone-size.
What I want is a collapseable navigation-menu, for example:
(not expanding) BUTTON A
(not expanding) BUTTON B
(expandable) BUTTON C
BUTTON C option A
So when you see the menu first, you only see button A,B and C.
When you click on Button C, below it appears (by clicking on it) the option A.
What I have so far is a button with a three-lines nav icon.
When you click on it, you see button a,b,c .
But when you click on Button c, the whole list collapse back, and when re-opening, you see the full list. This is not what I had in mind...
My coding:
HTML
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$(".text").hide();
$(".accordeon div:first-child").addClass("expand_first");
$(".expand").click(function() {
$(".text").slideUp(500);
if ($(this).next(".text").is(":visible")) {
$(this).next(".text").slideUp(500);
} else {
$(this).next(".text").slideToggle(500);
}
});
});
$(window).load(function() {
$('.flexslider').flexslider();
});
$('ul li a').click(function() {
$(this).parent().find('ul.sub-menu').toggle();
return false;
});
</script>
<div id="nav-small">
<div class="accordeon">
<div class="expand"><img src="http://localhost:8080/wordpress/wp-content/uploads/2016/06/navicon.png" alt="Navigation" width="50%" height="auto" />
Navigation
</div>
<div class="text">
<ul>
<li>Home</li>
<li>Library</li>
<li class="sub-menu">Lifestyle▼
<ul>
<li>Cleaning & Organizing</li>
<li>Health & Beauty</li>
<li>Travel</li>
</ul>
</li>
</ul>
</div></div></div>
My CSS:
#nav-small{
width:100%;
height:auto;
}
#nav-small img{
width:50%;
max-width:30px;
max-height:30px;
}
#nav-small ul{
list-style:none;
padding:0;
margin:0;
font-family:verdana;
}
#nav-small ul li{
text-align:center;
text-decoration:none;
padding: 2% 0;
border-bottom:1px solid black;
}
#nav-small ul li a{
text-decoration:none;
}
#nav-small ul li.sub-menu{
border-bottom:none;
padding-bottom:0;
}
.accordeon{
text-align:center;
background-color: rgba(104,144,192,1.00) ;
width:100%;
}
.accordeon .expand {
display:inline-block;
width:30%;
height:auto;
margin:auto;
font-family: Verdana;
background-color: rgba(104,144,192,1.00) ;
cursor:pointer;
padding:1% 0;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}
.accordeon .text{
display:none;
float:left;
width:100%;
height:auto;
margin:auto;
border-top:0px;
border-bottom:1px solid #ccc;
background-color: rgba(211,196,213,1.00);
text-align:left;
}

Answer 1

SOLUTION:
Wrap your icon in a span to add a selector and add a click event listener to it.
Also I added a class that uses display: none for your nested ul.
JSFiddle
CODE SNIPPET:
$(document).ready(function() {
$(".text").hide();
$(".accordeon div:first-child").addClass("expand_first");
$(".expand").click(function() {
$(".text").slideUp(500);
if ($(this).next(".text").is(":visible")) {
$(this).next(".text").slideUp(500);
} else {
$(this).next(".text").slideToggle(500);
}
});
$("#trigger").on("click", function() {
$(".sub-menu > ul").slideToggle(500, function() {
$(this).toggleClass("is-not-visible");
});
});
});
$(window).load(function() {
$('.flexslider').flexslider();
});
$('ul li a').click(function() {
$(this).parent().find('ul.sub-menu').toggle();
return false;
});
#nav-small {
width: 100%;
height: auto;
}
#nav-small img {
width: 50%;
max-width: 30px;
max-height: 30px;
}
#nav-small ul {
list-style: none;
padding: 0;
margin: 0;
font-family: verdana;
}
#nav-small ul li {
text-align: center;
text-decoration: none;
padding: 2% 0;
border-bottom: 1px solid black;
}
#nav-small ul li a {
text-decoration: none;
}
.accordeon {
text-align: center;
background-color: rgba(104, 144, 192, 1.00);
width: 100%;
}
.accordeon .expand {
display: inline-block;
width: 30%;
height: auto;
margin: auto;
font-family: Verdana;
background-color: rgba(104, 144, 192, 1.00);
cursor: pointer;
padding: 1% 0;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.accordeon .text {
display: none;
float: left;
width: 100%;
height: auto;
margin: auto;
border-top: 0px;
border-bottom: 1px solid #ccc;
background-color: rgba(211, 196, 213, 1.00);
text-align: left;
}
.is-not-visible {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-small">
<div class="accordeon">
<div class="expand"><img src="http://placehold.it/100x100" alt="Navigation" width="50%" height="auto" /> Navigation
</div>
<div class="text">
<ul>
<li>Home</li>
<li>Library</li>
<li class="sub-menu">Lifestyle <span id="trigger">▼</span>
<ul class="is-not-visible">
<li>Cleaning & Organizing</li>
<li>Health & Beauty</li>
<li>Travel</li>
</ul>
</li>
</ul>
</div>
</div>
</div>