Develop Reference

how to keep first menu expanded in jquery & expand/collapse icon not working

I have a dropdown where I have to keep 1st menu expanded & expand/collapse icon. The icon is visible only onclick. By default, the icon is not reflected. I have to insert the icon from my local. Expand/Collapse is working.Maybe my approach to writing code is wrong Please help to fix the icon issue. Below is my code. Thanks in advance.
$(document).ready(function () {
$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("expand collapse");
});
$('.sub-menu a').click(function(){
if($(this).hasClass('toggIconUp')){
$(this).removeClass('toggIconUp').addClass('toggIconDown');
}else{
$(this).removeClass('toggIconDown').addClass('toggIconUp');
//var blockId = $(this).parent().attr('data-toggle-id');
}
});
});
body {
background-color: #fff;
font-size: 14px;
}
.nav {
position: relative;
margin: 50px;
width: 170px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li a {
display: block;
background: #ffffff;
padding: 10px 15px;
color: #414141;
text-decoration: none;
}
.sub-menu ul li a:hover {
background: #dedede;
}
.nav ul li a .icon_sty {
text-align: center;
float:right;
}
.nav ul ul {
background-color:#eeeeee;
}
.toggIconDown {
background-image: url(./images/down_arrow.svg) !important;
background-repeat:no-repeat !important;
background-position-x: 92% !important;
}
.toggIconUp {
background-image: url(./images/up_arrow.svg) !important;
background-repeat:no-repeat !important;
background-position-x: 92% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class='sub-menu toggIconUp'>Panel<div class='icon_sty right'></div>
<ul class="">
<li><a href='#'>one </a></li>
<li><a href='#'>two </a></li>
<li><a href='#'>three </a></li>
<li><a href='#'>four </a></li>
<li><a href='#'>five </a></li>
</ul>
</li>
<li class='sub-menu toggIconUp'>second<div class='icon_sty right'></div>
<ul class="">
<li><a href='#'>second_one </a></li>
<li><a href='#'>second-two </a></li>
</ul>
</li>
</ul>
</div>

Drop down menu with clicks

I am creating a drop down menu that shows a submenu when clicked instead of using hover.
When I click it is displayed as it should be but I would like that when I click on another option the previous one is hidden and not kept open as right now.
In advance, thank you very much to the person who takes the trouble to help me, here is the code I'm working with.
$('.parent a').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>

Move the display logic to ".active" selector in css,
.active {
display: block;
}
then try the following script.
It would check if the click is not inside current menu, if the click is anywhere but current menu, active class will be removed.
var menu = $('.parent a').next('ul')
$(document).mouseup(e => {
if (!menu.is(e.target) // if the target of the click isn't the container...
&& menu.has(e.target).length === 0) // ... nor a descendant of the container
{
menu.removeClass("active");
}
});
$('.parent a').on("click", function (e) {
$(this).next('ul').toggleClass("active");
e.stopPropagation();
e.preventDefault();
});
Here's the full code,
var menu = $('.parent a').next('ul')
$(document).mouseup(e => {
if (!menu.is(e.target) // if the target of the click isn't the container...
&& menu.has(e.target).length === 0) // ... nor a descendant of the container
{
menu.removeClass("active");
}
});
$('.parent a').on("click", function (e) {
$(this).next('ul').toggleClass("active");
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.active {
display: block;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>

using siblings(), you have quickest solution:
parents("li.parent").last() keeps the highest parent li.parent of selected item
.sibling() keeps all others li.parent brothers (of main menu)
.find("ul") keeps all ul children from all li.parent brothers
$('.parent a').on("click", function(e) {
$(this).parents("li.parent").last().siblings().find("ul").hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
$('.parent a').on("click", function(e) {
$(this).parents("li.parent").last().siblings().find("ul").hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>

You could try with
$('.parent a').on("click", function (e) {
$('.parent ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});

Moving border and description if above tab is selected

Can anyone show me how I can achieve moving .showBorder and .box-tip when .clicked is selected. So when tab is selected the tabs below will have a border selected with above text moving along. only require one tab and one border to be selected at one time. Here's my code so far:
$(document).on("click", '.clicked', function(){
$('.clicked').removeClass('selected');
$(this).addClass('selected');
});
.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:25px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:25px auto;padding:0;}
.showBorder { border: 3px dashed black; }
.box-tip {
display:inline;
margin: auto;
position: relative;
}
.numberCircle {
border-radius: 50%;
font-size: 12px;
border: 5px solid #000;
color: #fff;
background: #000;
}
.numberCircle span {
text-align: center;
display: block;
}
li.selected {color:#fff;background-color:#000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="list-box">
<li class="clicked">1</li>
<li class="clicked">2</li>
<li class="clicked">3</li>
<li class="clicked">4</li>
<li class="clicked">5</li>
<li class="clicked">6</li>
<li class="clicked">7</li>
<li class="clicked">8</li>
</ul>
<div class="box-tip">
<span class="info">Regular length for your collar size</span>
<span class="numberCircle">?</span>
</div>
<ul class="box-sleeve">
<li class="border">a</li>
<li class="border">b</li>
<li class="border showBorder">c</li>
<li class="border">d</li>
<li class="border">e</li>
<li class="border">f</li>
<li class="border">g</li>
<li class="border">h</li>
</ul>

Use .index(element) to get the position of the element relative to its siblings.
Use .eq(index) to get the element at index position in another element.
So it would look like this:
$(document).on("click", '.clicked', function() {
var boxes = $('.list-box li'),
sleeves = $('.box-sleeve li'),
tip = $('.box-tip .info');
var currBox = $(this),
currSleeve = sleeves.eq(boxes.index(currBox));
// select box and sleeve
boxes.removeClass('selected');
currBox.addClass('selected');
sleeves.removeClass('showBorder');
currSleeve.addClass('showBorder');
// move tip
tip.css('left', currBox.position().left - 100);
});
.container {
/* to center both list */
text-align: center;
}
.list-box {
margin: 25px auto;
padding: 0;
}
.list-box li {
display: inline-block;
list-style-type: none;
padding: 1em;
background: red;
}
.list-box li.selected {
color: #fff;
background-color: #000;
}
.box-sleeve {
margin: 25px auto;
padding: 0;
}
.box-sleeve li {
display: inline-block;
list-style-type: none;
padding: 1em;
background: red;
}
.showBorder {
border: 3px dashed black;
}
.box-tip {
/*border: 1px solid #ddd;*/
position: relative;
height: 25px;
line-height: 25px;
}
.box-tip .info {
position: absolute;
/* to ensure that it one liner */
white-space: nowrap;
/* default text position */
left: 120px;
}
.numberCircle {
border-radius: 50%;
font-size: 12px;
border: 5px solid #000;
color: #fff;
background: #000;
}
.numberCircle span {
text-align: center;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- wrap everything in a container, so that we can center them -->
<div class="container">
<ul class="list-box">
<li class="clicked">1</li>
<li class="clicked">2</li>
<li class="clicked">3</li>
<li class="clicked">4</li>
<li class="clicked">5</li>
<li class="clicked">6</li>
<li class="clicked">7</li>
<li class="clicked">8</li>
</ul>
<div class="box-tip">
<!-- this will be absolutely positioned to have flexibility in moving it -->
<span class="info">Regular length for your collar size <span class="numberCircle">?</span></span>
</div>
<ul class="box-sleeve">
<li class="border">a</li>
<li class="border">b</li>
<li class="border">c</li>
<li class="border">d</li>
<li class="border">e</li>
<li class="border">f</li>
<li class="border">g</li>
<li class="border">h</li>
</ul>
</div>
Edit
You can use .position() to get the position of your selected box and use it to calculate the position of the .box-tip. Though, you'll notice it requires some changes to the HTML and CSS (see comments) to ensure that it is always centered.

What is the correct way to display nested uls?

I'm trying to create a nested sidebar menu for mobile.
When I click on the span.big I want the next ul to become visible.
So I call .next().
Now the nested ul does show, however the problem is that the li below the doesn't move down under it, meaning that the ul is overlapping the li.
(function($) {
$('.big').click(function() {
$(this).next();
});
})(jQuery);
How can i make the li move down correctly?
(function($) {
$('.big').click(function() {
$(this).next();
});
})(jQuery);
#cssmenu {
background-color: #333333;
height: 100%;
font-family: Arvo, serif;
font-size: 17px;
font-weight: normal;
color: white;
}
#cssmenu ul {
list-style: none;
padding-left: 0;
}
#cssmenu li {
height: 50px;
}
#cssmenu ul>li {
padding-top: 13px;
border-bottom: 1px solid rgba(120, 120, 120, 0.2)
}
#cssmenu ul>li>a {
color: white;
margin-left: 15px;
}
#cssmenu ul>li>ul {
display: none;
}
#cssmenu span.big {
float: right;
border-left: 1px solid rgba(120, 120, 120, 0.2);
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 50px;
width: 50px;
margin-top: -13px;
font-size: 1.5em;
padding-left: 17px;
padding-top: 5px;
}
#cssmenu span:hover {
background-color: rgba(0, 0, 0, 0.2);
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-nav">
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a>
</li>
<li class='active'><a href='#'>Products</a>
<span class="big">+</span>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a>
</li>
<li><a href='#'>Sub Product</a>
</li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a>
</li>
<li><a href='#'>Sub Product</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</div>
</div>

The height of the li is restricted so the submenu can't display properly.
Plus you aren't selecting anything with the JQuery next statement.
As mentioned in the comments, if a height is required for the li, you can substitute min-height for height.
$(document).ready(function() {
$('.big').click(function() {
$(this).next('ul').slideToggle();
});
});
* {
margin: 0;
box-sizing: border-box;
}
#cssmenu {
background-color: #333333;
height: 100%;
font-family: Arvo, serif;
font-size: 17px;
font-weight: normal;
color: white;
}
#cssmenu ul {
list-style: none;
padding-left: 0;
}
#cssmenu >ul > li {
min-height: 50px;
}
#cssmenu ul>li {
padding-top: 13px;
border-bottom: 1px solid rgba(120, 120, 120, 0.2)
}
#cssmenu ul>li>a {
color: white;
margin-left: 15px;
}
#cssmenu ul>li>ul {
display: none;
}
#cssmenu span.big {
height: 50px;
float: right;
border-left: 1px solid rgba(120, 120, 120, 0.2);
border-left: 1px solid rgba(120, 120, 120, 0.2);
width: 50px;
margin-top: -13px;
font-size: 1.5em;
padding-left: 17px;
padding-top: 5px;
}
#cssmenu span:hover {
background-color: rgba(0, 0, 0, 0.2);
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-nav">
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a>
</li>
<li class='active'><a href='#'>Products</a>
<span class="big">+</span>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a>
</li>
<li><a href='#'>Sub Product</a>
</li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a>
</li>
<li><a href='#'>Sub Product</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</div>
</div>

in jQuery, next() is just used to select the next sibling of an element.
That means your javascript code isn't doing anything as you're not using the result of next()

jsFiddle : https://jsfiddle.net/6yesewh9/
the fix was changing your li css height to min-height
#cssmenu li{
min-height:50px;
}
Also I changed your .next to use .siblings` in your jQuery code

toggle images for expand all and collapse all

I am trying to swap images of collapse all and expand all on click but i am reallly not getting it please can any one help me ... thanks in advance
here is the the link for the sample
http://www.ornusweb.com/showcase/checking/collapsible-menu.html
everything is working fine except the expan all collapse all buttons wen we click on it.
it should swap images
please help me !!!
Here is the css
body {
font: 10pt Arial, Helvetica, Sans-serif;
}
a {
text-decoration: none;
}
#example1,
#example2,
#example3,
#example4,
#example5 {
float: left;
}
.expand_all{
cursor: pointer;
}
.collapse_all {
cursor: pointer;
}
.example_menu {
font-size: 90%;
list-style: none;
margin: 0;
padding: 0;
vertical-align: top;
width: 624px;
}
.example_menu ul {
display: none;
list-style: none;
padding: 0;
}
#menu1,
#menu2,
#menu3,
#menu4,
#menu5 {
margin: 0;
}
#menu1 li,
#menu2 li,
#menu3 li,
#menu4 li,
#menu5 li,
.example_menu li {
background-image: none;
margin: 0;
padding-bottom: 1px;
}
.example_menu ul ul {
display: block;
}
.example_menu ul ul li a {
padding-left: 20px;
width: 109px;
}
.example_menu a {
color: #000;
cursor: pointer;
display: block;
font-weight: bold;
margin-left: 0;
padding: 10px 2px 2px 17px;
width: 605px;
height: 24px;
}
.example_menu a.expanded {
background: #E8E8E8 url('images/minusimg1.png') no-repeat 592px 50%;
}
.example_menu a.collapsed {
background: #E8E8E8 url('images/plusimg1.png') no-repeat 592px 50%;
}
.example_menu a:hover {
text-decoration: none;
}
.example_menu ul a {
background: #e8e8e8;
border-top: 2px solid #fff;
color: #000;
display: block;
font-weight: normal;
padding: 2px 2px 2px 10px;
width: 119px;
}
.example_menu ul a:link {
font-weight: normal;
}
.example_menu ul a:hover {
background : #f5f5f5;
text-decoration: underline;
}
.example_menu li.active a {
background: #fff;
}
.example_menu li.active li a {
background: #e8e8e8;
}
#menu1 li.footer,
#menu2 li.footer,
#menu3 li.footer,
#menu4 li.footer,
#menu5 li.footer,
.example_menu .footer {
background: transparent url('images/footer.jpg') no-repeat 0 0;
border-top: 2px solid #fff;
height: 9px;
line-height: 15px;
margin: 0 0 10px 0;
width: 131px;
}
.example_menu .footer span {
display: none;
}
/* nadeem css */
.newstyles{ font: 20px/18px arial;color: #0B0B0C;margin: 5px 0px 20px 5px;}
.newstyles li{ height: 32px;font: bold 12px/32px arial;color: #0B0B0C;}
.newstyline{clear: both;height: 1px;background-color: #E6E6E6;width: 100%;margin: 1px 0px 3px 0px;}
}
here is the js
$(document).ready(function() {
setTimeout(function() {
// Slide
$('#menu1 > li > a.expanded + ul').slideToggle('medium');
$('#menu1 > li > a').click(function() {
$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
});
$('#example1 .expand_all').click(function() {
$('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').slideDown('medium');
});
$('#example1 .collapse_all').click(function() {
$('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').slideUp('medium');
});
}, 250);
});
and here is the html
<div id="example1">
<div><a class="expand_all"><img src="images/close.jpg" class="img-swap" /></a><a class="collapse_all"><img src="images/open.jpg" alt="" /></a></div>
<ul id="menu1" class="example_menu">
<li><a class="expanded">Section A</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
<li><a class="expanded">Section B</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
<li><a class="expanded">Section C</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
</ul>
</div>

Guessing it is the two images in the top, you could do this:
<div>
<a class="expand_all" style="display: none;" onclick="$('.expand_all').hide();$('.collapse_all').show()">
<img class="img-swap" src="images/toggle-buttons_01.png">
</a>
<a class="collapse_all" onclick="$('.expand_all').show();$('.collapse_all').hide()" style="display: inline;">
<img alt="" src="images/toggle-buttons_02.png">
</a>
</div>
Simply hiding the irrelevant one....not really swapping images though.