javascript - update - tooltip bootstrap css
Colapso de bootstrap de Twitter: cambiar la visualización del botón de alternar (9)
Estoy usando Twitter Bootstrap para crear secciones plegables de texto. Las secciones se expanden cuando se presiona un botón + . Mi código html es el siguiente:
<div class="row-fluid summary">
<div class="span11">
<h2>MyHeading</h2>
</div>
<div class="span1">
<button type="button" class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
</div>
</div>
<div class="row-fluid summary">
<div id="intro" class="collapse">
Here comes the text...
</div>
</div>
¿Hay alguna manera de cambiar el botón para mostrar - lugar de + después de expandir la sección (y volver a + cuando se contrae de nuevo)?
Información adicional : esperaba que hubiera una solución simple de Twitter-bootstrap / css / html para mi problema. Todas las respuestas hasta el momento hacen uso de JavaScript o PHP. Debido a esto, deseo agregar algo más de información sobre mi entorno de desarrollo: quiero usar esta solución dentro de un sitio web basado en SilverStripe (versión 3.0.5) que tiene algunas implicaciones para el uso tanto de PHP como de JavaScript.
Agregue un código jquery, necesita jquery para hacer esto:
<script>
$(".btn[data-toggle=''collapse'']").click(function() {
if ($(this).text() == ''+'') {
$(this).text(''-'');
} else {
$(this).text(''+'');
}
});
</script>
Algunos pueden tener problemas para cambiar el Bootstrap js (y tal vez sea válido), pero aquí hay un enfoque de dos líneas para lograr esto.
En bootstrap.js, busque la función Collapse.prototype.show y modifique la llamada this. $ Trigger para agregar el cambio html de la siguiente manera:
this.$trigger
.removeClass(''collapsed'')
.attr(''aria-expanded'', true)
.html(''Collapse'')
Del mismo modo, en la función Collapse.prototype.hide, cámbialo a
this.$trigger
.addClass(''collapsed'')
.attr(''aria-expanded'', false)
.html(''Expand'')
Esto alternará el texto entre "Contraer" cuando todo se expande y "Expandir" cuando todo está colapsado.
Dos lineas. Hecho.
EDITAR: a largo plazo esto no funcionará. bootstrap.js es parte de un paquete de Nuget, así que no creo que esté proponiendo mi cambio al servidor. Como se mencionó anteriormente, no es una buena práctica para editar bootstrap.js, así que implementé la solución de PSL que funcionó muy bien. No obstante, mi solución funcionará localmente si necesita algo rápido solo para probarlo.
Aquí hay otra solución CSS única que funciona con cualquier diseño HTML .
Funciona con cualquier elemento que necesite cambiar. Cualquiera que sea su configuración de alternar, simplemente lo coloca dentro de un par de elementos con las clases if-collapsed y if-not-collapsed dentro del elemento de alternar.
La única pega es que debes asegurarte de poner el estado inicial deseado de alternar. Si está cerrado inicialmente, coloca una clase collapsed en el alternar.
También requiere el selector :not , por lo que no funciona en IE8.
Ejemplo HTML:
<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample">
<!--You can put any valid html inside these!-->
<span class="if-collapsed">Open</span>
<span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
Menos versión:
[data-toggle="collapse"] {
&.collapsed .if-not-collapsed {
display: none;
}
&:not(.collapsed) .if-collapsed {
display: none;
}
}
Versión CSS:
[data-toggle="collapse"].collapsed .if-not-collapsed {
display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
display: none;
}
Más fácil con la codificación en línea
<button type="button" ng-click="showmore = (showmore !=null && showmore) ? false : true;" class="btn float-right" data-toggle="collapse" data-target="#moreoptions">
<span class="glyphicon" ng-class="showmore ? ''glyphicon-collapse-up'': ''glyphicon-collapse-down''"></span>
{{ showmore !=null && showmore ? "Hide More Options" : "Show More Options" }}
</button>
<div id="moreoptions" class="collapse">Your Panel</div>
Me gustó la solución exclusiva de CSS de PSL , pero en mi caso necesitaba incluir algo de HTML en el botón, y la propiedad CSS de contenido muestra el HTML sin formato con etiquetas en este caso.
En caso de que pueda ayudar a alguien más, he bifurcado su violín para cubrir mi caso de uso: http://jsfiddle.net/brunoalla/99j11h40/2/
HTML:
<div class="row-fluid summary">
<div class="span11">
<h2>MyHeading</h2>
</div>
<div class="span1">
<button class="btn btn-success collapsed" data-toggle="collapse" data-target="#intro">
<span class="show-ctrl">
<i class="fa fa-chevron-down"></i> Expand
</span>
<span class="hide-ctrl">
<i class="fa fa-chevron-up"></i> Collapse
</span>
</button>
</div>
</div>
<div class="row-fluid summary">
<div id="intro" class="collapse">
Here comes the text...
</div>
</div>
CSS:
button.btn .show-ctrl{
display: none;
}
button.btn .hide-ctrl{
display: block;
}
button.btn.collapsed .show-ctrl{
display: block;
}
button.btn.collapsed .hide-ctrl{
display: none;
}
Mi siguiente solución JS es mejor que los otros enfoques aquí porque asegura que siempre dirá ''abierto'' cuando el objetivo esté cerrado, y viceversa.
HTML:
<a href="#collapseExample" class="btn btn-primary" data-toggle="collapse" data-toggle-secondary="Close">
Open
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
JS:
$(''[data-toggle-secondary]'').each(function() {
var $toggle = $(this);
var originalText = $toggle.text();
var secondaryText = $toggle.data(''toggle-secondary'');
var $target = $($toggle.attr(''href''));
$target.on(''show.bs.collapse hide.bs.collapse'', function() {
if ($toggle.text() == originalText) {
$toggle.text(secondaryText);
} else {
$toggle.text(originalText);
}
});
});
Ejemplos:
$(''[data-toggle-secondary]'').each(function() {
var $toggle = $(this);
var originalText = $toggle.text();
var secondaryText = $toggle.data(''toggle-secondary'');
var $target = $($toggle.attr(''href''));
$target.on(''show.bs.collapse hide.bs.collapse'', function() {
if ($toggle.text() == originalText) {
$toggle.text(secondaryText);
} else {
$toggle.text(originalText);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<a href="#collapseExample" class="btn btn-primary" data-toggle="collapse" data-toggle-secondary="Close">
Open
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
Otros beneficios de este enfoque:
- el código es SECO y reutilizable
- cada botón de colapso permanece separado
- solo necesita poner un cambio en el HTML: agregar el atributo
data-toggle-secondary
Supongo que podría mirar dentro de su código descargado donde exactamente hay un signo + (pero esto podría no ser muy fácil).
¿Qué haría? Encontraría la clase / id de los elementos DOM que contienen el signo + (supongamos que es ".collapsible" , y con Javascript (en realidad jQuery):
<script>
$(document).ready(function() {
var content=$(".collapsible").html().replace("+", "-");
$(".collapsible").html(content));
});
</script>
editar De acuerdo ... Lo siento, no he mirado el código de arranque ... pero supongo que funciona con algo como slideToggle , o slideDown and slideUp ... Imagine que es un slideToggle para los elementos de la clase .collapsible , que revela contenidos de algunos elementos .info . Entonces:
$(".collapsible").click(function() {
var content=$(".collapsible").html();
if $(this).next().css("display") === "none") {
$(".collapsible").html(content.replace("+", "-"));
}
else $(".collapsible").html(content.replace("-", "+"));
});
Esto parece lo contrario que hacer, pero como la animación real se ejecuta en paralelo, comprobará css antes de la animación, y es por eso que debe comprobar si está visible (lo que significa que se ocultará una vez que se complete la animación) y luego configure el + o - correspondiente.
Todas las otras soluciones publicadas aquí provocan que la palanca se desincronice si se hace doble clic. La siguiente solución usa los eventos provistos por el marco Bootstrap , y el alternar siempre coincide con el estado del elemento colapsable:
HTML:
<div class="row-fluid summary">
<div class="span11">
<h2>MyHeading</h2>
</div>
<div class="span1">
<button id="intro-switch" class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
</div>
</div>
<div class="row-fluid summary">
<div id="intro" class="collapse">
Here comes the text...
</div>
</div>
JS:
$(''#intro'').on(''show'', function() {
$(''#intro-switch'').html(''-'')
})
$(''#intro'').on(''hide'', function() {
$(''#intro-switch'').html(''+'')
})
Eso debería funcionar para la mayoría de los casos.
Sin embargo, también encontré un problema adicional al tratar de anidar un elemento plegable y su interruptor de palanca dentro de otro elemento plegable. Con el código anterior, cuando hago clic en el botón anidado para ocultar el elemento plegable colapsable, también cambia la alternancia del elemento principal. Puede ser un error en Bootstrap. Encontré una solución que parece funcionar: agregué una clase "contraída" a los interruptores de palanca (Bootstrap agrega esto cuando el elemento plegable está oculto pero no comienzan con él), luego lo agregué al selector jQuery para el ocultar la función:
HTML:
<div class="row-fluid summary">
<div class="span11">
<h2>MyHeading</h2>
</div>
<div class="span1">
<button id="intro-switch" class="btn btn-success collapsed" data-toggle="collapse" data-target="#intro">+</button>
</div>
</div>
<div class="row-fluid summary">
<div id="intro" class="collapse">
Here comes the text...<br>
<a id="details-switch" class="collapsed" data-toggle="collapse" href="#details">Show details</a>
<div id="details" class="collapse">
More details...
</div>
</div>
</div>
JS:
$(''#intro'').on(''show'', function() {
$(''#intro-switch'').html(''-'')
})
$(''#intro'').on(''hide'', function() {
$(''#intro-switch.collapsed'').html(''+'')
})
$(''#details'').on(''show'', function() {
$(''#details-switch'').html(''Hide details'')
})
$(''#details'').on(''hide'', function() {
$(''#details-switch.collapsed'').html(''Show details'')
})
prueba esto. http://jsfiddle.net/fVpkm/
Html: -
<div class="row-fluid summary">
<div class="span11">
<h2>MyHeading</h2>
</div>
<div class="span1">
<button class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
</div>
</div>
<div class="row-fluid summary">
<div id="intro" class="collapse">
Here comes the text...
</div>
</div>
JS: -
$(''button'').click(function(){ //you can give id or class name here for $(''button'')
$(this).text(function(i,old){
return old==''+'' ? ''-'' : ''+'';
});
});
Actualización Con Css puro, pseudo elementos
button.btn.collapsed:before
{
content:''+'' ;
display:block;
width:15px;
}
button.btn:before
{
content:''-'' ;
display:block;
width:15px;
}
Actualización 2 con Javascript puro
function handleClick()
{
this.value = (this.value == ''+'' ? ''-'' : ''+'');
}
document.getElementById(''collapsible'').onclick=handleClick;