Develop Reference

How to add transition to drop down list and make font awesome carat rotate on click

I've gotten my drop down working fine, however on click I would like to add a transition but I read that transitions cannot be added to display properties
Secondly, I would like to rotate the font awesome carat -180deg upon clicking my dropdown list
This is what I have got so far:
const dropdown = document.querySelector('.dropdown-btn');
const options = document.querySelector('.options');
const rotate = document.querySelector('.fas fa-angle-down');
dropdown.addEventListener('click', function() {
options.classList.toggle('active');
});
li {
background: red;
list-style-type: none;
}
.options {
padding-left: 0;
margin-bottom: 0;
height: 100%;
}
.options li {
display: none;
padding: 10px;
transition: 350ms ease;
margin-bottom: 15px;
}
.rotate-carat {
transform: rotate(-180px);
}
.options.active li {
display: block;
opacity: 1;
transition: 350ms all;
font-size: 0.875rem;
}
<li>
<a href="#" class="dropdown-btn"><i class="fas fa-address-card"></i>
<span>Company Profile</span>
<i class="fas fa-angle-down" style="float: right;"></i>
</a>
</li>
<ul class="options">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li>

First, I would fix your html - your options ul should be inside the li
Then I would toggle the class on the clicked button and change your css to use the adjacent child selector.
For the options transition, I would change it from using display to using opacity, this way you can hide your ul using height and then transition the opacity of the li once your change the height back to auto
For the rotation, you need to use deg instead of px
I have commented the code below
const dropdown = document.querySelector('.dropdown-btn');
dropdown.addEventListener('click', function(event) { // pass the event into the function
// toggle the class on the clicked button
event.currentTarget.classList.toggle('active');
});
li {
background: red;
list-style-type: none;
}
.options {
display: block;
height: 0; /* height 0 to start off hidden */
overflow: hidden;
padding-left: 0;
margin-bottom: 0;
}
.options li {
display: block;
opacity: 0;
padding: 10px;
transition: opacity 0.5s ease; /* transition opacity instead of display */
margin-bottom: 15px;
font-size: 0.875rem;
}
/* add a rotation to your icon */
.fa-angle-down {
transition: transform 350ms ease;
}
.active .fa-angle-down {
transform: rotate(-180deg); /* use deg instead of px */
}
/* change your active options selector to use the adjacent sibling selector */
.active+.options {
height: auto; /* this will show the list before the opacity transitions */
}
.active+.options li {
opacity: 1;
}
<ul>
<li>
<a href="#" class="dropdown-btn">
<i class="fas fa-address-card"></i>
<span>Company Profile</span>
<i class="fas fa-angle-down" style="float: right;">test</i>
</a>
<!-- fix your html and move your options ul here -->
<ul class="options">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</li>
</ul>

check this out!
const dropdown = document.querySelector('.dropdown-btn');
const options = document.querySelector('.options');
const rotate = document.querySelector('.rotate-carat');
dropdown.addEventListener('click', function() {
options.classList.toggle('active');
rotate.classList.toggle('active');
});
li {
background: red;
list-style-type: none;
}
.options {
padding-left: 0;
margin-bottom: 0;
transition: 350ms all linear;
transform: scaleY(0);
/*height: 0;*/
overflow: hidden;
opacity: 0;
transform-origin: top;
}
.options li {
display: block;
padding: 10px;
margin-bottom: 15px;
font-size: 0.875rem;
}
.rotate-carat {
display: inline-block;
float: right;
transition: all 300ms linear;
}
.rotate-carat.active {
transform: rotate(180deg);
}
.options.active {
opacity: 1;
transform: scaleY(1);
/*height: 10rem;*/
/*animation: 1s height 350ms forwards;*/
}
#keyframe height {
from {
height: 10rem;
} to {
height: auto;
}
}
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
<li>
<a href="#" class="dropdown-btn"><i class="fas fa-address-card"></i>
<span>Company Profile</span>
<span class="rotate-carat">
<i class="fas fa-angle-down"></i>
</span>
</a>
</li>
<ul class="options">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li>

An easy way to add a nice transition that you see on many websites is to use translateX().
So, the menu is displayed, but outside the viewport, so you don't see it. And when it is toggled, it slides in and out.
const list = document.querySelector('ul');
const toggle = document.querySelector('#menu-toggle');
toggle.addEventListener('click', (e) => {
list.classList.toggle('active');
});
ul{
transform: translateX(-100%);
transition: transform .3s;
}
ul.active{
transform: translateX(0);
}
<button id='menu-toggle'>Show Menu</button>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
Else, i'd recommend watching this video: Kevin Powell - Animating from display none.

How to make particular line or border or div resizable using jquery

Hi i wanted to make my div resizable as shown in the below image
As shown in the above image i want to resize my div which is not happening
codepen:https://codepen.io/anon/pen/bQGYmR
$(function()
{
$('.band').resizable();
$('#wrapper').resizable();
});
#wrapper {
padding-left: 0;
transition: all 0.5s ease;
height: 100%;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 210px;
height: calc(35vh - 6px); /* As you give a border of 3px */
overflow-y: auto;
background: rgba(0,0,0,0.9);
transition: all 0.5s ease;
border: 3px solid red;
color:white;
}
.stories-preview-wrapper{
position: fixed;
height: calc(65vh - 6px); /* As you give a border of 3px */
bottom: 0;
left: 0;
border: 3px solid green;
width: 210px;
}
.band{
position: relative;
border-top: 1px dotted red;
padding: 0px;
margin: 0px;
height: 2px !important;
text-align: center;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="wrapper" class="toggled hidden-xs">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>hello world</li>
<li>hello world</li>
</ul>
<div class="band">
<p><span>Heading</span></p>
</div>
</div>
<div class="stories-preview-wrapper">
<ul class="sidebar-nav">
<li>hello world 2</li>
<li>hello world 2</li>
</ul>
</div>
</div>

See this updated codepen for some additional hints.
First of all you need to add the jquery-ui.css to your code: https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
Second point: don't make the band resizable since it's just delimiter element. Instead, make the element before it resizable (in this case sidebar-nav). Create a wrapper for sidebar-nav and call $('.sidebar-nav-wrapper').resizable();
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>hello world</li>
<li>hello world</li>
</ul>
<div class="band"><p><span>Heading</span></p></div>
</div>
Third point: it's not clear from your screenshots which elements you want resizable. However $('#sidebar-wrapper').resizable(); seems to work if you remove overflow-y: auto; from the CSS.
I think there's still a lot of work to be done in this example, I just pointed out a few things that may help you get started.

Expanded accordion list items to stay in flex columns

In the demo below, there are two columns with list items and when I click on the #6 li in the column #2, the #5 li jumps to the column #1. Is there a way to make sure all 3 lists to STAY in the column #2 when clicked?
$(function() {
// (Optional) Active an item if it has the class "is-active"
$(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown();
$(".accordion > .accordion-item").click(function() {
// Cancel the siblings
$(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp();
// Toggle the item
$(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
});
});
ul {
display: flex;
flex-flow: wrap column;
height: 200px; /*to change height to split ul list*/
border: solid 1px red;
}
.accordion {
list-style: none;
}
.accordion-thumb {
margin: 0;
padding: 5px;
cursor: pointer;
font-weight: normal;
}
.accordion-thumb::before {
content: "";
display: inline-block;
height: 7px;
width: 7px;
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}
.accordion-panel {
margin: -10px;
display: none;
margin-left: 12px;
padding-bottom: 15px;
}
body {
line-height: 1.5;
margin: 0 auto;
max-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
<li class="accordion-item is-active">
<h3 class="accordion-thumb">1.) list one</h3>
<p class="accordion-panel">1111111111
</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">2.) list two</h3>
<p class="accordion-panel">2222222222 </p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">3.) list three</h3>
<p class="accordion-panel">3333333333
</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">4.) list four </h3>
<p class="accordion-panel">4444444444 </p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">5.) list five</h3>
<p class="accordion-panel">5555555555
</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">6.) list six</h3>
<p class="accordion-panel">6666666666 </p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">7.) list seven</h3>
<p class="accordion-panel">7777777777
</p>
</li>
</ul>

this is a sollution using Column-count in the css
demo
It does solve your problem in a different way
i've changed this from your example code
added a <li> between the fourth and fifth <li>
<li class="column-break"> </li>
changed the css of the UL to:
ul {
height: 200px;
border: solid 1px red;
column-count: 2;
}
added css for the <li> with the class "column-break"
.column-break {
break-after: column;
}

one ¿hacky? sollution is to change the height of the ul to 180px

The columns are created when the line items can no longer to fit within the confined height (200px). Once the column reaches enough items to fill up 200px, the next li is wrapped to the next column. When you click on the sixth li, it minimizes the 5th item. Those items are 38px high so five of them can easily fit into the first column (38 * 5 = 190) and thus the 5th item is wrapped into the first column.
Given the example and what you are trying to accomplish, you can either reduce the height of ul to 180px and it will keep the three items in the second row. OR you can add top or bottom padding or margin or a fixed/min-height to the li.

Updated after a comment.
Using Flexbox I see 1 way, by using one of the pseudo as a divider.
With the pseudo, it is positioned after the 4th item by simply give the first 4 òrder: -1. Then we give it 100% height, and as such it will force itself in a column of its own.
Furthermore, to avoid column wraps between the first 4 and last 3, the parent container must be high enough to accommodate all items in each column, plus either one's content (which, when using accordion, the container generally always is).
Stack snippet - Pseudo divider
$(function() {
// (Optional) Active an item if it has the class "is-active"
$(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown();
$(".accordion > .accordion-item").click(function() {
// Cancel the siblings
$(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp();
// Toggle the item
$(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
});
});
ul {
display: flex;
flex-flow: wrap column;
height: 250px; /*to change height to split ul list*/
border: solid 1px red;
}
.accordion {
list-style: none;
}
.accordion::before {
content: '';
height: 100%;
width: 0;
}
.accordion-item:nth-child(-n+4) {
order: -1;
}
.accordion-thumb {
margin: 0;
padding: 5px;
cursor: pointer;
font-weight: normal;
}
.accordion-thumb::before {
content: "";
display: inline-block;
height: 7px;
width: 7px;
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}
.accordion-panel {
margin: -10px;
display: none;
margin-left: 12px;
padding-bottom: 15px;
}
body {
line-height: 1.5;
margin: 0 auto;
max-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
<li class="accordion-item is-active">
<h3 class="accordion-thumb">1.) list one</h3>
<p class="accordion-panel">1111111111<br>3333333333<br>3333333333
</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">2.) list two</h3>
<p class="accordion-panel">2222222222<br>3333333333<br>3333333333 </p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">3.) list three</h3>
<p class="accordion-panel">3333333333<br>3333333333<br>3333333333
</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">4.) list four </h3>
<p class="accordion-panel">4444444444<br>3333333333<br>3333333333 </p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">5.) list five</h3>
<p class="accordion-panel">5555555555<br>3333333333<br>3333333333
</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">6.) list six</h3>
<p class="accordion-panel">6666666666<br>3333333333<br>3333333333 </p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">7.) list seven</h3>
<p class="accordion-panel">7777777777<br>3333333333<br>3333333333
</p>
</li>
</ul>

CSS how to add sliding transition

I have the following fiddle demo of a working sidenav menu with sliding sub menu contents. I followed the same demo without using Jquery (actually first using plain JS and then via CSS hover selector instead of click) and in my case sub menu doesn't slides/animates in the same way.
.submenu {
display: none;
}
.parent:hover .submenu,.submeun:hover {
display: block;
}
Is that animation due to Jquery toggle method?
$(document).ready(function() {
$('.parent').click(function() {
$('.submenu').toggle('visible');
});
});
How can I replicate the same approach without using jquery, via css or plain JS as I don't want to use jquery just for one simple sliding animation.
JSFIDDLE

This way ?
document.getElementById('home').addEventListener('click', function(e) {
var nextEl = e.target.nextElementSibling;
if(!nextEl.classList.contains('submenu')) {
return false;
}
if(nextEl.classList.contains('show')) {
nextEl.classList.remove('show')
}
else {
nextEl.classList.add('show');
}
});
.submenu {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
max-height: 0;
}
.submenu.show {
max-height: 300px;
}
<div id="sidebar">
<ul>
<li id="home" class="parent">Home</li>
<li class="submenu"><ul >
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul> </li>
<li>Explore</li>
</ul>
</div>

You could use slideToggle() and so avoid changing classes . This is just an option
Also , keep in mind that a submenu must be inside the parent li, for example <li>Home<ul><li>Sub link</li></ul></li> . I changed your HTML accordingly
see snippet below
$(document).ready(function() {
$('.parent').click(function() {
$(this).children(".submenu").slideToggle()
});
});
body, html {
height: 100%;
margin: 0;
overflow:hidden;
}
#sidebar {
background: #DF314D;
width: 240px;
height: 100%;
}
#sidebar ul {
padding: 0;
list-style: none;
}
#sidebar ul li {
padding: 15px 20px 15px 35px;
color: white;
}
#sidebar li:hover {
background: #C9223D;
}
.submenu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
<ul>
<li class="parent">Home
<ul class="submenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>Explore</li>
</ul>
</div>

jQuery Mobile: Position of external panel / always visible?

Since I do want to use the same panel on every page in a jQuery multipage html file, I'm interested in using the same code for every page.
This should work with external panels. However, I do have a problem with the positioning: As far as I can see, an external panel always opens on the full page height. What I want to have is instead the same behavior as the panel in the jQuery mobile demo page:
always visible on big screens (e.g. desktop browser) and,
when always visible, "inside" the page (e.g. below the header).
All in all: I wan't to create an external panel with the exact behavior of the (internal) panel on the demo page.
My first thought was to include an external html file on every page, so I can at least only edit this single file to save it everywhere. This looks great at first, but doesn't work at all because then the elements would have the same id (e.g. using forms in the panel).
Is there a clean solution for this problem?

The exact CSS and HTML from the JQM Demo Page is (see below). The JQM Demo page shows the panel below the header if the browser window is larger than 60em --- 960px and in my demo i set it 40em
External Panels go at end of data role page(s).
Demo expand the window to reveal the panel
https://jsfiddle.net/jag6ose3/
Html
<div data-role="page">
<div data-role="header">
<h1>External panels</h1>
Opanel
</div>
<div role="main" class="ui-content my-content">
<h1>Content Area</h1>
</div>
</div>
<div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
<br>
<ul data-role="listview">
<li>The Panel</li>
<li>option A</li>
<li>option B</li>
<li>option C</li>
<li>option D</li>
</ul>
</div>
Css
#media (min-width: 40em) {
#my-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 25%;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.my-content {
width: 67%;
padding-top: 2em;
padding-left: 5%;
padding-right: 3%;
float: right;
}
.opanel {
visibility:hidden;
}
}
Code
$(function () {
$("body>[data-role='panel']").panel(); //initialize the external panel
$(document).on("click", ".opanel", function () {
$("#my-panel").panel("open")
});
});

There is a more complex example. Width of panel is 300px and window is less then 900px, icon .opanel will be displayed.
<script id="panel-init">
function resizeP() {
var cw = $("body").prop("clientWidth");
var padding2x = 32;
if (cw > 900) {
$(".my-content").width(cw - 300 - padding2x);
}
else
$(".my-content").width(cw - padding2x);
}
$(function () {
$("body>[data-role='panel']").panel(); //initialize the external panel
$(document).on("click", ".opanel", function () {
$("#my-panel").panel("open");
});
});
$(document).ready(function () {
resizeP();
});
$(window).resize(function () {
resizeP();
});
</script>
<style>
##media screen and (min-width: 900px) {
#my-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 300px;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.my-content {
width: 300px;
/*padding-top: 2em;
padding-left: 5%;
padding-right: 3%;*/
float: right;
}
.opanel {
visibility: hidden;
}
}
.ui-content {
padding: 16px;
}
.countBubl {
float: left;
margin-top: -30px;
margin-left: 35px;
background: #ed1d24;
color: #fff;
padding: 2px;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading {
margin: 0;
}
.ui-li-static.ui-collapsible {
padding: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {
border-top-width: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn,
.ui-li-static.ui-collapsible > .ui-collapsible-content {
border-bottom-width: 0;
}
</style>
<div data-role="page">
<div data-role="header">
<h1>External panels</h1>
Opanel
</div>
<div role="main" class="ui-content my-content">
<h1>Content Area</h1>
<button>dds</button>
<p>A paragraph with a tooltip. Learn more</p>
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
<p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
</div>
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider">Mail</li>
<li>Inbox</li>
<li>Outbox</li>
<li data-role="list-divider">Contacts</li>
<li>Friends</li>
<li>Work</li>
</ul>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>Summary <span class="ui-li-count ui-btn-corner-all countBubl">12</span></li>
<li>Favs</li>
<li>Setup</li>
</ul>
</div><!-- /navbar -->
</div>
</div>
<div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
<div data-role="collapsibleset" data-theme="a" data-inset="false">
<div data-role="collapsible">
<h2>Mailbox</h2>
<ul data-role="listview">
<li>Inbox <span class="ui-li-count">12</span></li>
<li>Outbox <span class="ui-li-count">0</span></li>
<li>Drafts <span class="ui-li-count">4</span></li>
<li>Sent <span class="ui-li-count">328</span></li>
<li>Trash <span class="ui-li-count">62</span></li>
</ul>
</div>
<div data-role="collapsible">
<h2>Calendar</h2>
<ul data-role="listview" data-theme="a" data-divider-theme="b">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
<li>
<a href="index.html">
<h3>Stephen Weber</h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</a>
</li>
<li>
<a href="index.html">
<h3>jQuery Team</h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
</li>
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
<li>
<a href="index.html">
<h3>Avery Walker</h3>
<p><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
</li>
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
<li>
<a href="index.html">
<h3>Amazon.com</h3>
<p><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>12:47</strong>PM</p>
</a>
</li>
</ul>
</div>
<div data-role="collapsible">
<h2>Contacts</h2>
<ul data-role="listview" data-autodividers="true" data-theme="a" data-divider-theme="b">
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li>Bob Cabot</li>
<li>Caleb Booth</li>
<li>Christopher Adams</li>
<li>Culver James</li>
</ul>
</div>
</div>
#*<br>
<ul data-role="listview">
<li>The Panel</li>
<li>option A</li>
<li>option B</li>
<li>option C</li>
<li>option D</li>
</ul>*#
</div>
</div>