I tried to hide and show my sub-list through inline css I want to call them through CSS and my arrow should be toggle to down arrow when user click on li…
earlier i was not using tags for toggle my arrow now I am using tags for achieving the result…
Until someone who knows what they are doing comes along here’s a basic solution but I feel your inline onclick handlers should eventually be removed for external routines.
Add a reference to the list element that called the routine and then add a class to that element so that you can toggle the arrow.
onclick="myFunction('list1',this)"
e.g.
<ul class="tabs tabs_vertical tabsContent">
<li data-rel="" onclick="myFunction('list1',this)"> <i class="fa fa-angle-right fa-custom" aria-hidden="true"></i>
<!--<i class="fa fa-angle-down fa-custom" aria-hidden="true"></i>-->
<!--<span class="glyphicon glyphicon-chevron-right fa-custom" aria-hidden="true"></span>-->
<a href="#" class="txtNoUnderline txtWhite">Suppor for my mobile service</a>
<p>Troubleshooting</p>
</li>
<li class="tabsSublist" id="list1" style="display:none">
<div class="col-lg-6 col-md-5 col-sm-5">
<ul class="custom-bullet">
<li><a href="#" aria-label="mobile check-up">Mobile Check-up</a></li>
<li><a href="#" aria-label="">I have a problem with Lorem ipsum</a></li>
<li><a href="#" aria-label="">Lorem ipsum</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Vivalis sensis</a></li>
</ul>
</div>
</li>
<li data-rel="" onclick="myFunction('list2', this)"> <i class="fa fa-angle-right fa-custom" aria-hidden="true"></i>
<!--<i class="fa fa-angle-down fa-custom" aria-hidden="true"></i>-->
<!--<span class="glyphicon glyphicon-chevron-right fa-custom" aria-hidden="true"></span>-->
<a href="#" class="txtNoUnderline txtWhite">Hints and Tips</a>
<p>Lorem Ipsum dolor</p>
</li>
<li class="tabsSublist" id="list2" style="display:none">
<div class="col-lg-6 col-md-5 col-sm-5" style="border:0px solid">
<ul class="custom-bullet">
<li><a href="#" aria-label="how to manage my internet usage">How to manage my internet usage?</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Learn your upgrade status</a></li>
</ul>
</div>
</li>
</ul>
Then change the script to add the class.
function myFunction(obj,parent) {
//debugger
var x = document.getElementById(obj);
if (x.style.display === 'none') {
x.style.display = 'block';
parent.classList.add('arrow-down')
} else {
x.style.display = 'none';
parent.classList.remove('arrow-down')
}
}
Lastly add some CSS to turn the arrow downwards when the class is present.
.tabs li i{transition:.5s ease;}
.tabs li.arrow-down i{
transform:rotate(90deg) translateX(-.4em);
}
Full working page:
<!DOCTYPE html>
<html class=" js flexbox canvas canvastext webgl touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" style="">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bell Footer</title>
<!-- Bootstrap -->
<link href="http://www.acmearchitectural.com/mymobileUsage/assets/css/bell-1.css" rel="stylesheet">
<link href="http://www.acmearchitectural.com/mymobileUsage/assets/css/bell-side-tabs.css" rel="stylesheet">
<link href="http://www.acmearchitectural.com/mymobileUsage/assets/css/allBrowsers_framework.css" type="text/css" rel="stylesheet" />
<link href="http://www.acmearchitectural.com/mymobileUsage/assets/css/global-connector.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="http://www.acmearchitectural.com/mymobileUsage/assets/css/customStyle.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="http://www.acmearchitectural.com/mymobileUsage/assets/css/bell.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.tabs li i {
transition:.5s ease;
}
.tabs li.arrow-down i {
transform:rotate(90deg) translateX(-.4em);
}
</style>
</head>
<body>
<!--Component starts here-->
<!--<div class="spacer40"></div>-->
<main id="maincontent">
<div class="spacer30"></div>
<div class="bgBlueDark txtWhite">
<div class="container liquid-container mpad">
<div class="panel-body mpad">
<div class="col-lg-12 bgBlueDark mpad">
<div class="txtWhite valign-middle panel-body hidden-xs mpad">
<div class="col-lg-7 col-md-7 col-sm-7 footerList">
<h2 class="bellSlim">Suppor for my mobile service</h2>
<p>Troubleshooting</p>
<ul class="custom-bullet">
<li><a href="#" aria-label="mobile check-up">Mobile Check-up</a></li>
<li><a href="#" aria-label="">I have a problem with Lorem ipsum</a></li>
<li><a href="#" aria-label="">Lorem ipsum</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Vivalis sensis</a></li>
</ul>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 footerList">
<h2 class="bellSlim">Hints and Tips</h2>
<p>Lorem Ipsum dolor</p>
<ul class="custom-bullet">
<li><a href="#" aria-label="how to manage my internet usage">How to manage my internet usage?</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Learn your upgrade status</a></li>
</ul>
</div>
</div>
<div class="txtWhite valign-middle panel-body visible-xs mpad">
<ul class="tabs tabs_vertical tabsContent">
<li data-rel="" onclick="myFunction('list1',this)"> <i class="fa fa-angle-right fa-custom" aria-hidden="true"></i>
<!--<i class="fa fa-angle-down fa-custom" aria-hidden="true"></i>-->
<!--<span class="glyphicon glyphicon-chevron-right fa-custom" aria-hidden="true"></span>-->
<a href="#" class="txtNoUnderline txtWhite">Suppor for my mobile service</a>
<p>Troubleshooting</p>
</li>
<li class="tabsSublist" id="list1" style="display:none">
<div class="col-lg-6 col-md-5 col-sm-5">
<ul class="custom-bullet">
<li><a href="#" aria-label="mobile check-up">Mobile Check-up</a></li>
<li><a href="#" aria-label="">I have a problem with Lorem ipsum</a></li>
<li><a href="#" aria-label="">Lorem ipsum</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Vivalis sensis</a></li>
</ul>
</div>
</li>
<li data-rel="" onclick="myFunction('list2', this)"> <i class="fa fa-angle-right fa-custom" aria-hidden="true"></i>
<!--<i class="fa fa-angle-down fa-custom" aria-hidden="true"></i>-->
<!--<span class="glyphicon glyphicon-chevron-right fa-custom" aria-hidden="true"></span>-->
<a href="#" class="txtNoUnderline txtWhite">Hints and Tips</a>
<p>Lorem Ipsum dolor</p>
</li>
<li class="tabsSublist" id="list2" style="display:none">
<div class="col-lg-6 col-md-5 col-sm-5" style="border:0px solid">
<ul class="custom-bullet">
<li><a href="#" aria-label="how to manage my internet usage">How to manage my internet usage?</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Learn your upgrade status</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="spacer30"></div>
</main>
<script>
function myFunction(obj,parent) {
//debugger
var x = document.getElementById(obj);
if (x.style.display === 'none') {
x.style.display = 'block';
parent.classList.add('arrow-down')
} else {
x.style.display = 'none';
parent.classList.remove('arrow-down')
}
}
</script>
</body>
</html>
As I said my JS is basic so I’m sure the above could be greatly improved
I have to point out that I abhor Inline event handlers and “CSS” in the “JavaScript” almost as much as I abhor that
abomination which goes under the name “Bootstrap”.
Unfortunately, much as I would have loved to, I dared not
remove that accursed framework for fear that you might
flounder without it, but I did rearrange the document for
the Inline event handlers and “CSS” in the “JavaScript”
<!DOCTYPE html>
<html class="js flexbox canvas canvastext webgl touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" style="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="http://www.acmearchitectural.com/mymobileUsage/html/">
<title>Bell Footer</title>
<!-- Bootstrap -->
<link href="../assets/css/bell-1.css" rel="stylesheet">
<link href="../assets/css/bell-side-tabs.css" rel="stylesheet">
<link href="../assets/css/allBrowsers_framework.css" type="text/css" rel="stylesheet" />
<link href="../assets/css/global-connector.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="../assets/css/customStyle.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="../assets/css/bell.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style media="screen">
.hide {
display:none;
}
.rotate0 {
transform: translate( 0%, -50% ) rotateZ( 0deg );
transition: 0.5s ease;}
.rotate1 {
transform: translate( 0%, -50% ) rotateZ( 90deg );
transition: 0.5s ease;
}
</style>
</head>
<body>
<!--Component starts here-->
<!--<div class="spacer40"></div>-->
<main id="maincontent">
<div class="spacer30"></div>
<div class="bgBlueDark txtWhite">
<div class="container liquid-container mpad">
<div class="panel-body mpad">
<div class="col-lg-12 bgBlueDark mpad">
<div class="txtWhite valign-middle panel-body hidden-xs mpad">
<div class="col-lg-7 col-md-7 col-sm-7 footerList">
<h2 class="bellSlim">Suppor for my mobile service</h2>
<p>Troubleshooting</p>
<ul class="custom-bullet">
<li><a href="#" aria-label="mobile check-up">Mobile Check-up</a></li>
<li><a href="#" aria-label="">I have a problem with Lorem ipsum</a></li>
<li><a href="#" aria-label="">Lorem ipsum</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Vivalis sensis</a></li>
</ul>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 footerList">
<h2 class="bellSlim">Hints and Tips</h2>
<p>Lorem Ipsum dolor</p>
<ul class="custom-bullet">
<li><a href="#" aria-label="how to manage my internet usage">How to manage my internet usage?</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Learn your upgrade status</a></li>
</ul>
</div>
</div>
<div class="txtWhite valign-middle panel-body visible-xs mpad">
<ul class="tabs tabs_vertical tabsContent">
<li class="changearrow" data-rel="">
<i id="fa0" class="rotate0 fa fa-angle-right fa-custom" aria-hidden="true"></i>
<a href="#" class="txtNoUnderline txtWhite">Suppor for my mobile service</a>
<p>Troubleshooting</p>
</li>
<li id="list0" class="tabsSublist hide">
<div class="col-lg-6 col-md-5 col-sm-5">
<ul class="custom-bullet">
<li><a href="#" aria-label="mobile check-up">Mobile Check-up</a></li>
<li><a href="#" aria-label="">I have a problem with Lorem ipsum</a></li>
<li><a href="#" aria-label="">Lorem ipsum</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Vivalis sensis</a></li>
</ul>
</div>
</li>
<li class="changearrow">
<i id="fa1" class="rotate0 fa fa-angle-right fa-custom" aria-hidden="true"></i>
<a href="#" class="txtNoUnderline txtWhite">Hints and Tips</a>
<p>Lorem Ipsum dolor</p>
</li>
<li id="list1" class="tabsSublist hide">
<div class="col-lg-6 col-md-5 col-sm-5">
<ul class="custom-bullet">
<li><a href="#" aria-label="how to manage my internet usage">How to manage my internet usage?</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Lorem Ipsum dolor sit amet</a></li>
<li><a href="#" aria-label="">Learn your upgrade status</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="spacer30"></div>
</main>
<script>
(function(d) {
'use strict';
var ca = d.getElementsByClassName('changearrow');
for ( var c = 0; c < ca.length; c ++ ) {
ca[c].addEventListener( 'click', changeArrow(c), false);
}
function changeArrow(c) {
ca[c].onclick = function() {
if ( d.getElementById('list'+c).classList.contains('hide') ){
d.getElementById('list'+c).classList.remove('hide');
d.getElementById('fa'+c).classList.remove('rotate0');
document.getElementById('fa'+c).classList.add('rotate1');
}
else {
d.getElementById('list' + c).classList.add('hide');
d.getElementById('fa'+c).classList.remove('rotate1');
d.getElementById('fa'+c).classList.add('rotate0');
}
};
}
}(document));
</script>
</body>
</html>
Note that the “CSS” and the “JavaScript” should be
removed to external files.
I removed this tag from line no. 6, my list hide and show is working but arrow toggle is not working i tried to debugge the code but not getting anything…
