<script src="/Js/ariporo.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      LoadAcordeonTransparencia();
   });
</script> 
<div class="col-md-6">
   <div class="accordion-container">
      <a href="#" class="accordion-toggle"><i class="fa fa-envelope" aria-hidden="true"></i> 1.Mecanismos de Contacto<span class="toggle-icon"><i class="fa fa-plus-circle" aria-hidden="true"></i></span></a>
      <div class="accordion-content" style="display: none;">
         <ul class="Acordeon1 ListTranspa">
         </ul>
      </div>
      <!--/.accordion-content--> </div>
   <!--/.accordion-container-->
      <div class="accordion-container">
         <a href="#" class="accordion-toggle"><i class="fa fa-folder-open" aria-hidden="true"></i> 2. Informaci&oacute;n de Inter&eacute;s<span class="toggle-icon"><i class="fa fa-plus-circle" aria-hidden="true"></i></span></a>
         <div class="accordion-content">
            <ul class="Acordeon2 ListTranspa">
            </ul>
         </div>
         <!--/.accordion-content--> </div>
      <!--/.accordion-container-->
         <div class="accordion-container">
            <a href="#" class="accordion-toggle"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 3. Planeaci&oacute;n<span class="toggle-icon"><i class="fa fa-plus-circle" aria-hidden="true"></i></span></a>
            <div class="accordion-content" style="display: none;">
               <ul class="Acordeon3 ListTranspa">
               </ul>
            </div>
            <!--/.accordion-content--> </div>
         <div class="accordion-container">
            <a href="#" class="accordion-toggle"><i class="fa fa-check-square-o" aria-hidden="true"></i> 4. Auditor&iacute;a<span class="toggle-icon"><i class="fa fa-plus-circle" aria-hidden="true"></i></span></a>
            <div class="accordion-content" style="display: none;">
               <ul class="Acordeon4 ListTranspa">
               </ul>
            </div>
            <!--/.accordion-content--> </div>
         <!--/.accordion-container-->
            <div class="accordion-container">
               <a href="#" class="accordion-toggle"><i class="fa fa-cogs" aria-hidden="true"></i> 5. Administraci&oacute;n<span class="toggle-icon"><i class="fa fa-plus-circle" aria-hidden="true"></i></span></a>
               <div class="accordion-content">
                  <ul class="Acordeon5 ListTranspa">
                  </ul>
               </div>
               <!--/.accordion-content--> </div> 
            <div class="accordion-container">
               <a href="#" class="accordion-toggle"><i class="fa fa-building" aria-hidden="true"></i> 6. Control Interno<span class="toggle-icon"><i class="fa fa-plus-circle" aria-hidden="true"></i></span></a>
               <div class="accordion-content" style="display: none;">
                  <ul class="Acordeon6 ListTranspa">
                  </ul>
               </div>
               <!--/.accordion-content--> </div> 
</div>
<div class="col-md-6">
   <div class="accordion-container">
      <a href="#" class="accordion-toggle"><i class="fa fa-gavel" aria-hidden="true"></i> 7. Normatividad<span class="toggle-icon"><i class="fa fa-plus-circle" aria-hidden="true"></i></span></a>
      <div class="accordion-content">
         <ul class="Acordeon7 ListTranspa">
         </ul>
      </div>
      <!--/.accordion-content--> </div>
   <div class="accordion-container">
      <a href="#" class="accordion-toggle"><i class="fa fa-money" aria-hidden="true"></i> 8. Presupuesto<span class="toggle-icon"><i class="fa fa-plus-circle" aria-hidden="true"></i></span></a>
      <div class="accordion-content" style="display: none;">
         <ul class="Acordeon8 ListTranspa">
         </ul>
      </div>
      <!--/.accordion-content--> </div>
   <div class="accordion-container">
      <a href="#" class="accordion-toggle"><i class="fa fa-book" aria-hidden="true"></i> 9. Gesti&oacute;n de Informaci&oacute;n P&uacute;blica<span class="toggle-icon"><i class="fa fa-plus-circle" aria-hidden="true"></i></span></a>
      <div class="accordion-content">
         <ul class="Acordeon9 ListTranspa">
         </ul>
      </div>
      <!--/.accordion-content--> </div>
   <div class="accordion-container">
      <a href="#" class="accordion-toggle"><i class="fa fa-user" aria-hidden="true"></i> 10. Contrataci&oacute;n<span class="toggle-icon"><i class="fa fa-plus-circle" aria-hidden="true"></i></span></a>
      <div class="accordion-content">
         <ul class="Acordeon10 ListTranspa">
         </ul>
      </div>
      <!--/.accordion-content--></div>
   <div class="accordion-container"> 
      <a href="#" class="accordion-toggle"><i class="fa fa-hand-scissors-o" aria-hidden="true"></i>&#160;11. Tr&aacute;mites y Servicios<span class="toggle-icon"><i class="fa fa-plus-circle" aria-hidden="true"></i></span></a> 
      <div class="accordion-content" style="display: none;"> 
         <ul class="Acordeon11 ListTranspa"> 
         </ul> 
      </div> 
      <!--/.accordion-content--> </div>
</div>
<script>
 $('.accordion-toggle').on('click', function(event){
    	event.preventDefault();
    	// create accordion variables
    	var accordion = $(this);
    	var accordionContent = accordion.next('.accordion-content');
    	var accordionToggleIcon = $(this).children('.toggle-icon');
    	
    	// toggle accordion link open class
    	accordion.toggleClass("open");
    	// toggle accordion content
    	accordionContent.slideToggle(250);
    	
    	// change plus/minus icon
    	if (accordion.hasClass("open")) {
    		accordionToggleIcon.html("<i class='fa fa-minus-circle'></i>");
    	} else {
    		accordionToggleIcon.html("<i class='fa fa-plus-circle'></i>");
    	}
});
</script>