h26k2/dropdown.html

## dropdown.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dropdown Practice</title>
<style>

/*just basic styles not necessary for you*/

li{
    position: relative;
    list-style: none;
}

li > a{
    text-decoration: none;
    color:#333;
    font-family: sans-serif;
    display: block;
    line-height: 2em;
    text-transform: capitalize;
    padding:0.8em 0 0.8em 0;
}

li > a:hover{
    background:rgba(0,0,0,0.12);
}

/*important styles*/

[data-dropdown-status  = "hide"]{
    display: none;
}

[data-dropdown-status = "show"]{
    display: block;
}

</style>
</head>
<body>

<h1>when you dont want to close the sub dropdown if selected by the user</h1>

<ul>
    <li>
        <a href="javascript:void(0)">some link content</a>
    </li>
    <li class="dropdown">
        <a href="javascript:void(0)" data-dd-action="show">some dropdown link content</a>
        <ul class="dropdown-content" data-dropdown-status = "hide">
            <li><a href="javascript:void(0)">some dropdown content of li item</a></li>
            <li><a href="javascript:void(0)">some dropdown content of li item</a></li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0)">some link content</a>
    </li>
</ul>


<h1>when you want to close the sub dropdown if selected by the user</h1>

<ul>
    <li>
        <a href="javascript:void(0)">some link content</a>
    </li>
    <li class="dropdown">
        <a href="javascript:void(0)" data-dd-action="show">some dropdown link content</a>
        <ul class="dropdown-content closable" data-dropdown-status = "hide">
            <li><a href="javascript:void(0)">some dropdown content of li item</a></li>
            <li><a href="javascript:void(0)">some dropdown content of li item</a></li>
        </ul>
    </li>

    <li>
        <a href="javascript:void(0)">some link content</a>
    </li>
</ul>


<script>


let ul_elem = document.getElementsByTagName("ul");

for(let i=0 ; i<ul_elem.length ; i++){
    ul_elem[i].addEventListener("click",dropdownFunction);
}

function dropdownFunction(){

    let clicked_elem = event.target;

    if(clicked_elem.nodeName === "A" && clicked_elem.hasAttribute("data-dd-action")){

        let dropdown = clicked_elem.parentNode.getElementsByClassName("dropdown-content")[0];

        if(clicked_elem.getAttribute("data-dd-action") === "show" && dropdown.getAttribute("data-dropdown-status") === "hide" ){
            show(clicked_elem,dropdown);
        }
        else if(clicked_elem.getAttribute("data-dd-action") === "hide" && dropdown.getAttribute("data-dropdown-status") === "show" ){
            hide(clicked_elem,dropdown);
        }

    }

}

function show(clickedElem , dd){
    clickedElem.setAttribute("data-dd-action","hide");
    dd.setAttribute("data-dropdown-status","show");
}

function hide(clickElem , dd){
    clickElem.setAttribute("data-dd-action","show");
    dd.setAttribute("data-dropdown-status","hide");
}


let closable = document.getElementsByClassName("closable");

for(let i=0 ; i<closable.length ; i++){
    closable[i].addEventListener("click",subDDClosable);
}

function subDDClosable(){

    let clicked_elem = event.target;

    if(clicked_elem.nodeName === "A"){
        let main_dd_toggler = this.parentNode.getElementsByTagName("a")[0];
        hide(main_dd_toggler,this);
    }

}


</script>
</body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Dropdown Practice</title>
	<style>

	/just basic styles not necessary for you/

	li{
	position: relative;
	list-style: none;
	}

	li > a{
	text-decoration: none;
	color:#333;
	font-family: sans-serif;
	display: block;
	line-height: 2em;
	text-transform: capitalize;
	padding:0.8em 0 0.8em 0;
	}

	li > a:hover{
	background:rgba(0,0,0,0.12);
	}

	/important styles/

	[data-dropdown-status = "hide"]{
	display: none;
	}

	[data-dropdown-status = "show"]{
	display: block;
	}

	</style>
	</head>
	<body>

	<h1>when you dont want to close the sub dropdown if selected by the user</h1>

	<ul>
	<li>
	<a href="javascript:void(0)">some link content</a>
	</li>
	<li class="dropdown">
	<a href="javascript:void(0)" data-dd-action="show">some dropdown link content</a>
	<ul class="dropdown-content" data-dropdown-status = "hide">
	<li><a href="javascript:void(0)">some dropdown content of li item</a></li>
	<li><a href="javascript:void(0)">some dropdown content of li item</a></li>
	</ul>
	</li>
	<li>
	<a href="javascript:void(0)">some link content</a>
	</li>
	</ul>


	<h1>when you want to close the sub dropdown if selected by the user</h1>

	<ul>
	<li>
	<a href="javascript:void(0)">some link content</a>
	</li>
	<li class="dropdown">
	<a href="javascript:void(0)" data-dd-action="show">some dropdown link content</a>
	<ul class="dropdown-content closable" data-dropdown-status = "hide">
	<li><a href="javascript:void(0)">some dropdown content of li item</a></li>
	<li><a href="javascript:void(0)">some dropdown content of li item</a></li>
	</ul>
	</li>

	<li>
	<a href="javascript:void(0)">some link content</a>
	</li>
	</ul>



	<script>


	let ul_elem = document.getElementsByTagName("ul");

	for(let i=0 ; i<ul_elem.length ; i++){
	ul_elem[i].addEventListener("click",dropdownFunction);
	}

	function dropdownFunction(){

	let clicked_elem = event.target;

	if(clicked_elem.nodeName === "A" && clicked_elem.hasAttribute("data-dd-action")){

	let dropdown = clicked_elem.parentNode.getElementsByClassName("dropdown-content")[0];

	if(clicked_elem.getAttribute("data-dd-action") === "show" && dropdown.getAttribute("data-dropdown-status") === "hide" ){
	show(clicked_elem,dropdown);
	}
	else if(clicked_elem.getAttribute("data-dd-action") === "hide" && dropdown.getAttribute("data-dropdown-status") === "show" ){
	hide(clicked_elem,dropdown);
	}

	}

	}

	function show(clickedElem , dd){
	clickedElem.setAttribute("data-dd-action","hide");
	dd.setAttribute("data-dropdown-status","show");
	}

	function hide(clickElem , dd){
	clickElem.setAttribute("data-dd-action","show");
	dd.setAttribute("data-dropdown-status","hide");
	}


	let closable = document.getElementsByClassName("closable");

	for(let i=0 ; i<closable.length ; i++){
	closable[i].addEventListener("click",subDDClosable);
	}

	function subDDClosable(){

	let clicked_elem = event.target;

	if(clicked_elem.nodeName === "A"){
	let main_dd_toggler = this.parentNode.getElementsByTagName("a")[0];
	hide(main_dd_toggler,this);
	}

	}


	</script>
	</body>
	</html>