liAccordion / accordion
Google Maps

Color templates

Select the desired color
Or set your custom color

Main Layout

Marker Shape

Marker Sign

Marker Position

Color Type

RESULT

  • View source

      Include files <head> ...[THIS CODE]... </head>

      <!--If you have already use jquery, then this line is not necessary--> 
      <script src="js/jquery-1.11.1.min.js"></script> 
      
      <!-- Plugins files-->
      <link rel="stylesheet" href="css/liAccordion.css">
      <script src="js/jquery.liAccordion.js"></script> 
      

      Custom CSS <style> ...[THIS CODE]... </style>

      There will be generated CSS

      Plugins Initialization <head> ...[THIS CODE]... </head>

      <!-- Initialization of plugin --> 
      <script>
      $(function(){
      	$('.ini_class').liAccordion();
      })
      </script> 
      

      HTML <body> ...[THIS CODE]... </body>

      <ul class="ini_class" data-colortheme="Pink" data-layout="menu" data-markershape="square" data-markersign="triangle" data-markerpos="left" data-colortype="bg">
      	<li><a href="#"><span class="glyphicon glyphicon-map-marker"></span> Allison At The Flemington Office Park 555 East Street, New York City 12345</a>
      		<ul>
      			<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.2110334321387!2d-73.66563874041341!3d40.75738297932707!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c288053f421ccb%3A0x9daa617320607769!2zRWFzdCBTdCwgTmV3IEh5ZGUgUGFyaywgTlkgMTEwNDAsINCh0KjQkA!5e0!3m2!1sru!2sua!4v1446586529345" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
      		</ul>
      	</li>
      	<li><a href="#"><span class="glyphicon glyphicon-map-marker"></span> Jason At New York City Office Park 555 West Street, New York City 12345</a>
      		<ul>
      			<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.2932425670247!2d-73.67126118426958!3d40.75557464288482!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2881b97c84fa5%3A0xe2b181c022209e04!2zV2VzdCBTdCwgTmV3IEh5ZGUgUGFyaywgTlkgMTEwNDAsINCh0KjQkA!5e0!3m2!1sru!2sua!4v1446586572991" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
      		</ul>
      	</li>
      	
      	<li><a href="#"><span class="glyphicon glyphicon-map-marker"></span> Johnathan At The Islips Office Park 555 South Street, New York City 12345</a>
      		<ul>
      			<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.338002390629!2d-73.66805218426961!3d40.75459004294521!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2881b501fbbc7%3A0x17f66d629392951b!2zU291dGggU3QsIE5ldyBIeWRlIFBhcmssIE5ZIDExMDQwLCDQodCo0JA!5e0!3m2!1sru!2sua!4v1446586600001" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
      		</ul>
      	</li>
      </ul>

Responsive Multi Level Accordion Navigation

DOWNLOAD liAccordion