Javascript funzione "onclick"

[batello]

Salve, ho una necessità nel fare un sito web.
In questa pagina ci sono tre box con un testo e sotto un link " + scopri di più". Al click di questo link, si apre una tendina con delle info e il " + " diventa " - ". Quando poi clicco nuovamente sul link la tendina si chiude e il "-" torna a essere "+".
Per fare questa cosa ho semplicemente creato una classe e, tramite CSS, ho inserito il "+" con un before. Tramite javascript ho scritto questa funzione che mi cambia il nome alla classe di partenza e, sempre tramite css, ho definito un before che mi metta il "-" anziché il "+".
La funzione javascript è questa:

Codice: Seleziona tutto

<script>
$(document).ready(function(){
    $("#mercatiDropdown a.link_contatti").on('click',function(){
        if($(this).hasClass("link_contatti")){
          $(this).removeClass("link_contatti").addClass("link_contattiAfterClick");
        }else{
           $(this).removeClass("link_contattiAfterClick").addClass("link_contatti");
        }
    });
});
</script>

Questa funzione va che è una meraviglia ma non prevede una cosa:
come dicevo i box con i link " + scopri di più" sono tre, uno accanto all'altro.
Se io mi trovo nel box A e clicco su " + scopri di più", si apre la tendina e il "+" si trasforma in "-". Se però invece di ricliccare sul link clicco su " + scopri di più" del box B. Si chiude la tendina di A, si apre quella di B e il suo "+" si trasforma in "-" però il "-" di A non torna a essere un "+".

Insomma, so di essermi spiegato uno schifo ma spero sia chiaro lo stesso.

[Zoff]

Ine ffetti non è chiaro.
Puoi postare il codice html incriminato?

[batello]

Questo è l'html

Codice: Seleziona tutto

	<div class="col-xs-4 dropdown yamm-fw">
		<h2>FINANZIAMENTI</h2>
		<hr />
		<!--<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>-->
		<a id="dettagliContatti" href="#" class="link_contatti" data-toggle="dropdown">I nostri contatti</a>
		<div class="dropdown-menu" >
			<div class="col-xs-12">
				<p class="paragraphL text-center">
				Alcune info
				</p>
			</div>
		</div>
	</div>
	
	<div class="col-xs-4 dropdown yamm-fw">
    <h2>LEASING</h2>
		<hr />
		<!--<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>-->
		<a href="#" class="link_contatti" data-toggle="dropdown">I nostri contatti</a>
		<div class="dropdown-menu" >
			<div class="col-xs-12">
				<p class="paragraphL text-center">
				Alcune info
				</p>
			</div>
		</div>
	</div>

	<div class="col-xs-4 dropdown yamm-fw">
	<h2>FACTORING</h2>
		<hr />
		<!--<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>-->
		<a href="#" class="link_contatti" data-toggle="dropdown">I nostri contatti</a>
		<div class="dropdown-menu" >
			<div class="col-xs-12">
				<p class="paragraphL text-center">
				Alcune info
				</p>
			</div>
		</div>
	</div>

Questo è il link con il "+" davanti

Codice: Seleziona tutto

<a href="#" class="link_contatti" data-toggle="dropdown">I nostri contatti</a>

.
Il + viene creato attraverso questo css

Codice: Seleziona tutto

#mercatiDropdown a.link_contatti:before{
	content:"+";
	display:inline-block;
	background:#000;
	color:#fff;
	border-radius:10px;
	width:20px;
	height:20px;
	text-align:center;
	margin-right:10px;
}

e il javascript è quello di sopra

[Zoff]

Quindi il "box A" dell'esempio sarebbe FINANZIAMENTI e il "box B" LEASING?

Non mi è chiaro cosa sia " + scopri di più"

[SuperStep]

dovresti salvarti in una variabile il "+ attivo", quando premi un elemento diverso da "+ attivo" quell'elemento torna ad essere come in oartenza.

(oppure semplicemente con brute force metti tutti gli elementi chiusi e poi rimetti quello premuto attivo).

[eaghezzi]

il problema è che il css viene applicato a tutti gli elementi
o fai una classe per ogni singolo elemento ed applichi quella al solo elemento $(this)...

o più elegantemente fai tutto via script

[SuperStep]

comunque dovrebbe essere piu' una cosa del genere:

Codice: Seleziona tutto

 $("#mercatiDropdown a.link_contatti").on('click',function(event){
        if($(this).hasClass("link_contatti")){
          $(event.target).removeClass("link_contatti").addClass("link_contattiAfterClick");
        }else{
           $(this).removeClass("link_contattiAfterClick").addClass("link_contatti");
        }
    });

[batello]

comunque dovrebbe essere piu' una cosa del genere:

Codice: Seleziona tutto

 $("#mercatiDropdown a.link_contatti").on('click',function(event){
        if($(this).hasClass("link_contatti")){
          $(event.target).removeClass("link_contatti").addClass("link_contattiAfterClick");
        }else{
           $(this).removeClass("link_contattiAfterClick").addClass("link_contatti");
        }
    });

Ho provato a sostituire il mio codice con questo ma purtroppo non funziona. Si comporta esattamente come il mio

[batello]

Quindi il "box A" dell'esempio sarebbe FINANZIAMENTI e il "box B" LEASING?

Non mi è chiaro cosa sia " + scopri di più"

Il "+ scopri di più" sarebbe "+ I nostri contatti"... avevo sbagliato a scrivere nel primo post

[batello]

il problema è che il css viene applicato a tutti gli elementi
o fai una classe per ogni singolo elemento ed applichi quella al solo elemento $(this)...

o più elegantemente fai tutto via script

Purtroppo non posso fare una classe per ogni singolo elemento perché il codice HTML che vi ho postato prima è una "versione semplificata" che però andremo a rendere più complessa in quanto i contenuti potranno cambiare quindi verrà creato un foreach che varia in base a quello che verrà inserito dal cliente.

Per quanto riguarda il "...o più elegantemente fai tutto via script" è quello che vorrei fare ma non so bene come. Non sono molto esperto di javascript; lo sto imparando in questi giorni per il lavoro

[Zoff]

In realtà è il comportamento predefinito di bootstrap, basta togliere data-toggle="dropdown" e aggiungere il toggle al click:

Codice: Seleziona tutto

$(document).ready(function(){
	$("#mercatiDropdown a.link_contatti").on('click',function(){
		$(this).dropdown('toggle');
		if($(this).hasClass("link_contatti")){
		  $(this).removeClass("link_contatti").addClass("link_contattiAfterClick");
		}else{
		   $(this).removeClass("link_contattiAfterClick").addClass("link_contatti");
		}
	});
});