Vamos a poner un ejemplo pequeñito pero muy util para este tipo de desplegables:
Agregamos este script en nuestro head:
<script type="text/javascript">
$(document).ready(function()
{
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</script>
Luego agregamos un poco de css: (lo podemos agregar abajo del script anterior en nuestro <head>)
<style type="text/css">
.accordion {
width: 250px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(../images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>
Por último (si por último, dije un ejemplo sencillo) agregamos nuestro html donde querramos el acordeón:
<div style="width:450px;" class="accordion">
<h3>Pestaña uno</h3>
<p>texo de la pestaña 1, links, div, img o lo que querramos poner</p>
<h3>Pestaña dos</h3>
<p>texo de la pestaña 3, links, div, img o lo que querramos poner</p>
<h3>Pestaña tres</h3>
<p>texo de la pestaña 3, links, div, img o lo que querramos poner</p>
</h3>
Y eso es todo, nos deja algo así:
Espero sirva.
Un poco de publicidad, por si alguien está interesado:
Ayuda tecnológica para su empresa
de Infoweb S.A., el Sábado, 13 de agosto de 2011 a las 22:25
Programación de Software
Tiene proyectos de software a medio terminar?
Sus programadores no conocen lenguajes para Web
Su diseñador no conoce Joomla!
Programación especializada para web, cubrimos proyectos con tiempos limites, con poco presupuesto, con poco tiempo, proyectos dificiles, especialmente para web, pero tambien para escritorio (en linux, en windows, en mac, en unix).
Sus programadores no conocen como programar para Web, necesita poner módulos en Joomla!, diseñar sitios facilmente, nosotros lo capacitamos.
Amplia experiencia en programacion PHP, JScript, ASP, .NET (vb, asp, c#), jquery, ajax.
LLamenos, le ayudamos, nos adaptamos y le programamos lo que necesita.
Programación para web, tips, capacitaciones, desarrollo, diseño, llamenos le podemos ayudar.
PHP, .NET, AJAX, JQUERY, MYSQL, MS SQL, JAVA, JAVASCRIPT.
Módulos para joomla!, para facebook, para twitter, para google apps, para wordpress y otros, resolvemos problemas serios de programación.
Preguntenos, mandenos su PIN, su email, un mensajito, su celular, su facebook o como sea...y lo atendemos con gusto.
ERP(Planificación de Recursos Empresariales) Sistemas Administrativos, Módulos:
- Contabilidad (centro de costos y presupuestos)
- Inventario/Bodegas
- Facturacion/POS (puntos de venta)
- Clientes (Cuentas por cobrar)
- Proveedores (Cuentas por pagar)
- Caja y Bancos
- Servicio al Cliente
- Nominas y Planillas (con control de ingreso)
- Producción (con control de formulas y procesos)
- Recursos Humanos (carrera, contratación, evaluación de desempeño, etc)
- Manejo de Proyectos
Sabe como va su proyecto?Que recursos tiene en uso?Cuanto es el costo total del proyecto?Cuantas horas hombres le ha invertido?
- Balance Scorecard
Sabe como está su empresa?Cual es el porcentaje de eficiencia en las diferentes áreas (Financiera, Recursos Humanos, Producción y Ventas)?Sabe en que momento debe invertir? o debe reforzar alguna de las áreas, principalmente ventas?
- CRM (ventas, atención al cliente, mercadeo, etc)
Es capaz de anticiparse a los deseos de sus clientes?Sabe cuales son las preferencias de sus clientes?Puede obtener información de sus clientes sin llegar al grado de acoso?Tiene retroalimentación de sus clientes?Sabe como su fuerza de ventas trata a estos clientes?Sabe cuanto tarda en obtener el servicio o producto su clientes, desde el momento que hace el primer contacto?
100% WEB: PHP, ASP o VB
Completamente para web, para windows o mezcla de ambos ambientes.
Multi-idiomas, adaptable a varias plataformas.
100% configurable, podemos incluir fuentes.
Alquilado, vendido, configurado en internet, configurado en su servidor intranet.
Llamenos o escribanos para un demo (se lo instalamos temporalmente en su equipo):
Precios comodos, facilidades (damos pagos)
Los sistemas administrativos le ayudan a llevar el control de su empresa, pero no le dan las herramientas para la toma de decisiones o para saber el estado actual de su negocio.
Necesita ayuda en cualquiera de estas áreal? Consulte, le ofresemos el software y la asesoría a sus necesidades de información.
Adaptamos sus procesos actuales a sistemas gerenciales modernos.
Especialistas en desarrollo web desde hace más de 20 años
INFOWEB, S.A. | infowebgt@gmail.comTel: (502) 5216-8215 | www.infowebsa.blogspot.comTwitter: @infowebsa | Facebook: http://www.facebook.com/infowebgt
No hay comentarios:
Publicar un comentario