jQueryUI Accordion opción activa

Acordeón activo opción 0

    Enfoque: Primero, agregue los scripts jQuery Mobile necesarios para su proyecto.

    <enlace rel=’hoja de estilo’ href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css”>
    <script src=”https: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
    <script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8. 16/jquery-ui.js”></script>

    Ejemplo 1:

    HTML

    <!DOCTYPE html> 
    <html> 
       
    <head> 
        <meta charset="utf-8"> 
        <meta name="viewport" content= 
            "width=device-width, initial-scale=1"> 
       
        <script src= 
    "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> 
        </script> 
       
        <script src= 
    "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"> 
        </script> 
       
        <link href= 
    "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
            rel="stylesheet" type="text/css" /> 
               
        <style> 
            .height { 
                height: 10px; 
            } 
        </style> 
       
        <script> 
            $(function () { 
                $( "#gfg" ).accordion(
                       { active: 1 }
                );
            }); 
        </script> 
        <style>
             #gfg{font-size: 17px;}
        </style>
    </head> 
       
    <body> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <b>jQueryUI | Active Accordion</b> 
        <br>
        <br>
        <div id="gfg">
            <h3>GFG</h3>
            <div>GeeksforGeeks</div>
            <h3>Geeks</h3>
            <div>GeeksforGeeks</div>
        </div> 
    </body> 
       
    </html>
    

    Producción:

    Ejemplo 2:

    HTML

    <!DOCTYPE html> 
    <html> 
       
    <head> 
        <meta charset="utf-8"> 
        <meta name="viewport" content= 
          "width=device-width, initial-scale=1"> 
       
        <script src= 
     "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> 
        </script> 
       
        <script src= 
     "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"> 
        </script> 
       
        <link href= 
     "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
          rel="stylesheet" type="text/css"/>
               
        <style> 
            .height { 
                height: 10px; 
            } 
        </style> 
       
        <script> 
            $(function () { 
                $( "#gfg" ).accordion(
                       { active: false }
                );        
            }); 
        </script> 
        
        <style>
             #gfg{font-size: 17px;}
        </style>
    </head> 
       
    <body> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <b>jQueryUI | Active Accordion</b> 
        <br>
        <br>
        <div id="gfg">
            <h3>A</h3>
            <div>A</div>
            <h3>B</h3>
            <div>B</div>
            <h3>C</h3>
            <div>C</div>
        </div> 
    </body> 
       
    </html>
    

    Producción:

    Publicación traducida automáticamente

    Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *