According View

Developer
MadheswaranM
Size
2,689 Kb
Views
14,168
  1. According View Previews
  2. According View HTML Codes
  3. According View CSS Codes
  4. According View JS Codes

How do I make an according view?

Jquery According view list.. What is a according view? How do you make a according view? This script and codes were developed by MadheswaranM on 16 November 2022, Wednesday.

According View Previews
IQ Test

According View - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>According View</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="sideNavBox">	<ul id="rootMenu" class="static root">	<li class="static level-0 selected"><a class="static menu-item-li" href="#"><span>Site 1</span></a>	<ul class="static level-0-ul selected"> <li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 1, page 1</span></a></li> <li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 1, page 2</span></a></li>	<li class="static level-1 selected"><a class="static menu-item-li" href="#"><span>Site 1, subsite 1</span></a>	<ul class="static level-1-ul selected">	<li class="static level-2 selected"><a class="static menu-item-li selected" href="#"><span>Site 1, subsite 1, page 1</span></a></li>	<li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 1, subsite 1, page 2</span></a></li>	</ul>	</li>	<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 1, subsite 2</span></a>	<ul class="static level-1-ul">	<li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 1 subsite 2, page 1</span></a></li>	<li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 1 subsite 2, page 2</span></a></li>	</ul>	</li>	<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 1, page 3</span></a></li>	</ul>	</li>	<li class="static level-0"><a class="static menu-item-li" href="#"><span>Site 2</span></a>	<ul class="static level-0-ul">	<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 2, page 1</span></a></li>	<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 2, subsite 1</span></a>	<ul class="static level-1-ul">	<li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 2, subsite 1, page 1</span></a></li>	</ul>	</li>	<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 2, subsite 2</span></a>	<ul class="static level-1-ul">	<li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 2, subsite 2, page 1</span></a></li>	<li class="static level-2"><a class="static menu-item-li" href="#"><span>Site 2, subsite 2, page 2</span></a></li>	</ul>	</li>	<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 2, page 2</span></a></li>	<li class="static level-1"><a class="static menu-item-li" href="#"><span>Site 2, page 3</span></a></li>	</ul>	</li>	</ul>	</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

According View - Script Codes CSS Codes

.selected { color: green !important;
}
body { font-family: "arial";
}
a:link, a:visited, a:active { color: blue;
}

According View - Script Codes JS Codes

function accordionMe(selector, initalOpeningClass) { var speedo = 300; var $this = selector; var accordionStyle = true; // fancy or not as fancy.. (just set it to true) // disable all links with # as href, or the page will jump like a chicken on coce $this.find("li").each(function(){ // Find all these links if ($(this).find("ul").size() != 0) { // and disable them if needed if ($(this).find("a:first").attr('href') == '#') { $(this).find("a:first").click(function(){ return false; }); } } }); // Hide every ul first $("#rootMenu li>ul").hide(); // Open all items (depending on the class you chose) $this.find("li."+initalOpeningClass).each(function(){ $(this).parents("ul").slideDown(speedo); }); // and now.. time for magic $this.find("li a").click(function(){ if ($(this).parent().find("ul").size() != 0) { if (accordionStyle) { if(!$(this).parent().find("ul").is(':visible')){ // get all parents parents = $(this).parent().parents("ul"); // get all visible ul's' visible = $this.find("ul:visible"); // Loop through visible.each(function(visibleIndex){ // check if parent was closed var close = true; parents.each(function(parentIndex){ if(parents[parentIndex] == visible[visibleIndex]){ close = false; return false; } }); // if closed, close parent if(close) if($(this).parent().find("ul") != visible[visibleIndex]) $(visible[visibleIndex]).slideUp(speedo); }); } } // if the parent was shown at first, hide him and vica versa if($(this).parent().find("ul:first").is(":visible")) $(this).parent().find("ul:first").slideUp(speedo); else $(this).parent().find("ul:first").slideDown(speedo); } }); // einde klik event } accordionMe($("#rootMenu"), "selected");
According View - Script Codes
According View - Script Codes
Home Page Home
Developer MadheswaranM
Username madhes
Uploaded November 16, 2022
Rating 3
Size 2,689 Kb
Views 14,168
Do you need developer help for According View?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

MadheswaranM (madhes) Script Codes
Name
Flip test
Simple hover effect for delete option
According height change
Custom checkboxes with CSS only
A Pen by MadheswaranM
Menu hover effect
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!