28172 sujets

CSS et mise en forme, CSS3

Bonjour
Je suis en train de de développer un menu avec bootstrap que voici ici.Pour le rendre visible,j'utilise la fonction accordion-toggle de bootstrap.

Tous fonctionne bien,sauf que pour ouvrir et fermer le toggle j'ai ajouté le + et - dans strong et em

Voici mon code :


<div id="collapseOne" class="accordion-body collapse in">
	<div class="accordion-inner">
	<div class="navbar-inner">
		<div class="container">
			<div style="position: static;" class="navbar navbar-inverse">
				<div class="container">
					<a data-target=".navbar-inverse-collapse" data-toggle="collapse" class="btn btn-navbar">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</a>
					<a href="#" class="brand"><img alt="" src="<{xoImgUrl img/home.png}>"></a>
					<div class="nav-collapse collapse navbar-inverse-collapse">
						<ul class="nav">
							<li><a href="#">Link</a></li>
						  	<li><a href="#">Link</a></li>
						  	<li class="dropdown">
							<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li class="nav-header">Nav header</li>
									<li><a href="#">Separated link</a></li>
									<li><a href="#">One more separated link</a></li>
								</ul>
						  	</li>
						</ul>
						
					</div>
				</div><!-- /.container -->
			</div>
		</div><!-- /container -->
	</div>
	</div>
	</div>
	<div class="accordion-heading visible-desktop">
	<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
	<span class="xd_plus">
		<strong>+</strong>
		<em>-</em>
	</span>
	</a>
	</div>


Actuellement,le + et - est affiché.

Comment pui-je faire pour que lorsque la barre est ouverte le - s'affiche et lorsque la barre est fermé le + s'affiche

Merci d'avance
Modifié par stephane72 (25 Oct 2013 - 12:12)
Bonjour,

Il y a une classe "collapsed" qui se rajoute après "accordion-toggle" lorsque la barre est repliée. Il est donc possible d'afficher uniquement le strong (= le "+") quand cette classe est présente, et seulement le em (= le "-") sinon
Modifié par Romain.E (25 Oct 2013 - 14:50)
Essais voir ça :

.collapsed em { display:none; }
.collapsed strong { display:inline; }
.collapse strong { display:none; }
.collapsed em { display:inline; }
Merci pour votre réponse

lemley62 a écrit :
Essais voir ça :

.collapsed em { display:none; }
.collapsed strong { display:inline; }
.collapse strong { display:none; }
.collapsed em { display:inline; }


Non,ca ne fonctionne pas
C'est bon,j'ai trouvé.J'ai mis ca :

        a.accordion-toggle em { display:inline; }
	a.accordion-toggle strong { display:none; }
	a.collapsed strong { display:inline; }
	a.collapsed em { display:none; }

Modifié par stephane72 (25 Oct 2013 - 17:04)