Come espandere casella di testo (dal titolo) 
Autore: Fabio B.
Visite 1838,
Followers 2,
Condiviso 0
Ciao a tutti,
nella mia pagina https://osteopathfabio.com/article-download-file-document-exercise.html sono presenti vari miei articoli.
Mi piacerebbe aggiungere la possibilità di espandere/ridurre cliccando sul titolo/intestazione.
Ho letto un'altra discussione in merito, e si consiglia Accordion Text, il quale però non mi permette di mantenere il testo e le figure così come roportato, ma solo il testo.
Premesso che non saprei mettere mano al codice, esiste un'altra opzione?
Ho la versione EVO, so che nella PRO si possono creare i tab, ma non è proprio l'opzione adatta a me, essendo già vari articoli e forse in versione mobile non è un'ottima opzione.
Grazie per l'eventuale aiuto
Fabio
Postato il
non ho ben capito cosa vorresti ottenere ... comunque la nuova "versione" dell'AccordionText che ora si chiama AccordionText/FAQ dà delle funzionalità in più... ripsetto a prima
https://market.websitex5.com/it/oggetti/anteprima/526c4939-3abc-41c3-b34a-37baa6a14af
Se non ti bastano ovviamente dovrai cercarti dei codici extra che facciano al caso tuo...
Con il codice di questi miei esempi puoi nascondere/mostrare qualsiasi oggetto di X5
Il sito è realizzato con EVO 2019, ma il codice dovrebbe essere valido anche per EVO 2020
http://essedi.altervista.org/_EVO2019/_showhide/index.html
... se non con le soluzioni precedentemente suggerite, dovendo rifare in ogni modo la struttura della pagina, ...altra soluzione non c'è, ... se non proprio con il codice EXTRA, che per altro vedo che dovrebbe/potrebbe essere semplice ed immediato da applicare anche per i non esperti, senza dover rifare la pagina...
... se ti interessa provare questa mia seconda possibilità, avvisami, così vedrò di postarti una adeguata iniezione di codice, ...indolore (copia/incolla)...
-
Autore
Intanto grazie a tutti,
si in sostanza intendevo esattamente la proposta di KolAsim
Purtroppo Accordion non mi permette di mantenere testo e figure così come riportate.
Autore
Grazie KolAsim,
intendo esattamente questo.
Quando ti è possibile, il tuo codice farà sicuramente al caso mio
Grazie ancora
Fabio
...!... considera che io non ho il programma e neanche il PC, per cui sarà importante la tua prova...!...
... se per caso non dovesse funzionare, magari sarà da applicare un ritardo alla funzione, e nel caso avvisami...
... il codice si applica per quella pagina con un semplice copia/incolla in questa sezione:
>> Passo 3 - Mappa > Finestra Proprietà Pagina > Le opzioni della Sezione Esperto | ▪Codice personalizzato: > (3°) - Prima della chiusura del tag HEAD
... codice (anche in allegato) :
<style>
/** div sino by KolAsim **/
.text-inner *:not(.imHeading2){display:none}
.imHeading2:after { content:" --»>";}
.imHeading2:hover{ opacity: 0.5 !important; color:red;cursor:pointer; }
</style>
<script>
$( document ).ready(function() {
nK=0; // div sino by KolAsim;
function chiudiK() { $( ".text-inner *:not(.imHeading2)" ).hide();}
$( "#imCell_20 .imHeading2" ).click(function() { if (nK == 1) {chiudiK();nK=0;} else { nK = 1;chiudiK();$( "#imCell_20 *" ).show();location.href = '#imCell_20';}})
$( "#imCell_13 .imHeading2" ).click(function() { if (nK == 2) {chiudiK();nK=0;} else { nK = 2;chiudiK();$( "#imCell_13 *" ).show();location.href = '#imCell_13';}})
$( "#imCell_14 .imHeading2" ).click(function() { if (nK == 3) {chiudiK();nK=0;} else { nK = 3;chiudiK();$( "#imCell_14 *" ).show();location.href = '#imCell_14';}})
$( "#imCell_15 .imHeading2" ).click(function() { if (nK == 4) {chiudiK();nK=0;} else { nK = 4;chiudiK();$( "#imCell_15 *" ).show();location.href = '#imCell_15';}})
$( "#imCell_16 .imHeading2" ).click(function() { if (nK == 5) {chiudiK();nK=0;} else { nK = 5;chiudiK();$( "#imCell_16 *" ).show();location.href = '#imCell_16';}})
$( "#imCell_17 .imHeading2" ).click(function() { if (nK == 6) {chiudiK();nK=0;} else { nK = 6;chiudiK();$( "#imCell_17 *" ).show();location.href = '#imCell_17';}})
});
</script>
.
ciao
.
Autore
Wow grazie, funziona perfettamente
Domanda: come posso aggiungere il codice per eventuali altri articoli che pubblicherò? O usare la stessa funzione per altri text in altre pagine?
Mi pare di capire che devo aggiungere una riga tipo la seguente con dati relativi al nuovo eventuale articolo? Tipo (im_Cell_***** ed nK consecutivo ai precedenti?
$( "#imCell_20 .imHeading2" ).click(function() { if (nK == 1) {chiudiK();nK=0;} else { nK = 1;chiudiK();$( "#imCell_20 *" ).show();location.href = '#imCell_20';}})
Grazie davvero!
... se usi la stessa struttura di pagina in altre pagine, puoi replicare il codice riferendolo agli ID delle relative celle...
... la variabile nK serve solo per la chiusura individuale; ...puoi fare meno della condizione, da me voluta ma non usata da molti Accordion...
... puoi fare a meno anche dell'Ancoraggio al Top, che non fa nessun Accordion...
... quindi considerando la prima cella "20", il relativo codice si può semplificare in questo modo:
$( "#imCell_20 .imHeading2" ).click(function() { chiudiK();$( "#imCell_20 *" ).show();})
... e così a seguire per le altre celle, (13, 14, 15, 16, 17)...
.
ciao
.
Autore
Ciao KolAsim,
grazie sempre per la pronta risposta.
1: ho fatto caso che il codice (il primo, completo, che mi hai dato) ha generato un "link" o "apri-chiudi" anche sulla cella dove è scritto "click on the file to open or download it", dovrebbe essere #imCell_36. Come posso eliminarlo?
2: posto che non sapevo fino a 5 min fa come capire il numero della cella, mi sono imbattuto in.... CTRL + freccia su + J per aprire JavaScript (corretto dire così?). Ho cliccato sull'elemento per visualizzare il numero della cella. Detto ciò, considerata un'altra pagina mi basta inserire solo il numero della cella che voglio aprire/chiudere?
Esempio, potrei farlo anche per i testi nella pagina https://www.osteopathfabio.com/osteopathic-medicine.html ? Ad esempio la casella di testo WHAT IT IS sembra essere la #imCell_6...
Cioè, inserisco:
<style>
/** div sino by KolAsim **/
.text-inner *:not(.imHeading2){display:none}
.imHeading2:after { content:" --»>";}
.imHeading2:hover{ opacity: 0.5 !important; color:red;cursor:pointer; }
</style>
<script>
$( document ).ready(function() {
nK=0; // div sino by KolAsim;
function chiudiK() { $( ".text-inner *:not(.imHeading2)" ).hide();}
e poi
$( "#imCell_6 .imHeading2" ).click(function() { chiudiK();$( "#imCell_6 *" ).show();})
Grazie
... allora puoi usare selettori individuali; ...sostituisci il precedente TAG <STYLE> con questo:
<style>
/** div sino by KolAsim **/
.text-inner *:not(.imHeading2){display:none}
#imCell_20 .imHeading2:after,#imCell_13 .imHeading2:after,#imCell_14 .imHeading2:after,#imCell_15 .imHeading2:after,#imCell_16 .imHeading2:after,#imCell_17 .imHeading2:after { content:" --»>";}
#imCell_20 .imHeading2:hover,#imCell_13 .imHeading2:hover,#imCell_14 .imHeading2:hover,#imCell_15 .imHeading2:hover,#imCell_16 .imHeading2:hover,#imCell_17 .imHeading2:hover { opacity: 0.5 !important; color:red;cursor:pointer; }
</style>
.
... hai usato una struttura diversa dalla precedente, pertanto devi individuare i relativi selettori; ...per questa pagina prova con questo codice:
<style>/** div sino by KolAsim **/ #imTextObject_14_06_tab0,#imTextObject_14_08_tab0,#imTextObject_14_15_tab0,#imTextObject_14_16_tab0{display:none; }#imCellStyleTitle_6:after,#imCellStyleTitle_8:after,#imCellStyleTitle_15:after,#imCellStyleTitle_16:after{ content:" --»>";} #imCellStyleTitle_6:hover,#imCellStyleTitle_8:hover,#imCellStyleTitle_15:hover,#imCellStyleTitle_16:hover{ opacity: 0.5 !important; color:red;cursor:pointer; }</style>
<script>$( document ).ready(function() {nK=0; // div sino by KolAsim;
function chiudiK() { $( "#imTextObject_14_06_tab0,#imTextObject_14_08_tab0,#imTextObject_14_15_tab0,#imTextObject_14_16_tab0" ).hide();}
$( "#imCellStyleTitle_6" ).click(function() { if (nK == 1) {chiudiK();nK=0;} else { nK = 1;chiudiK();$( "#imTextObject_14_06_tab0" ).show();location.href = '#imCell_6';}})
$( "#imCellStyleTitle_8" ).click(function() { if (nK == 2) {chiudiK();nK=0;} else { nK = 2;chiudiK();$( "#imTextObject_14_08_tab0" ).show();location.href = '#imCell_8';}})
$( "#imCellStyleTitle_15" ).click(function() { if (nK == 3) {chiudiK();nK=0;} else { nK = 3;chiudiK();$( "#imTextObject_14_15_tab0" ).show();location.href = '#imCell_15';}})
$( "#imCellStyleTitle_16" ).click(function() { if (nK == 4) {chiudiK();nK=0;} else { nK = 4;chiudiK();$( "#imTextObject_14_16_tab0" ).show();location.href = '#imCell_16';}})});</script>
.
... come detto in precedenza, se realizzi pagine con stile congruo ti faciliterai il compito per individuare i selettori e personalizzare il codice in modo semplice e ad hoc...
... secondo me però sarebbe meglio pensare ad un struttura adegua fatta con gli strumenti del programma, magri passando alla ultima versione, onde evitare di perdere il controllo dei codici EXTRA...
.
ciao
.
Autore
Ottimo, grazie!
Autore
Grazie ancora KolAsim,
tutto chiaro
In effetti questo è il primo sito creato nella mia vita
quindi, ad esempio, ho usato strutture diverse su varie pagine, non pensando alle conseguenze.
Quando dici "struttura adegua fatta con gli strumenti del programma" intendi template già pronti da riempire con i miei contenuti? In futuro credi si tratterà sempre di mettere mani al codice per questo apri-chiudi? O potrebbero inserire degli oggetti/comandi ad hoc? Perchè AccordionText si avvicina molto ma non sembra dare molto spazio di personalizzazione per il testo/figure...
Buon weekend e grazie ancora!!!
... secondo me il codice extra sarebbe da usare solo se proprio necessario per funzioni limitate mancanti, come nel tuo caso, ma possibilmente da evitare come sistema di lavoro; ...in genere con un colpo al secchio ed uno alla botte si risolvono molte cose; ...in questo caso, ed appunto a cose già fatte, e per non riparare e rivedere il tutto, ... non vedo altre alterntive all mia idea, checchè se ne possa dire...
... potresti scaricare la nuova versione DEMO 2020.3, ed acquistare l'Object > Accordion Text/FAQ, provare, ed al limite chiederne il rimborso nei termini previsti...
... io penso che questo nuovo Accordion Text/FAQ, come si deduce dall'anteprima online sia ben configurabile con varie opzioni; ...uno stimolo per un refresh del sito, rimanendo attivi ed aggiornati... bye ...
------------------------
... a completamento del precedente codice aggiungi questa mia utile invenzione x offset delle Ancore:
<script>
/** --- offset x Ancore by KolAsim --- **/
$( window ).on( 'hashchange', function( e ) {//K>;
hK=$("#imStickyBar").height();
scrollK=$(window).scrollTop();
scrollK=scrollK-hK;
$('html,body').animate({ //K1>;
scrollTop: scrollK
}, 500);//K1<<
});//K<<;
</script>
.
.
.
Bene, adesso che tutto si è concluso per il meglio, segnalo (anche se è conosciuto da anni) un altro sistema per ottenere un accordion con gli oggetti di WS.
Mi riferisco a QUESTO articolo scritto ai tempi della 12, ma, con l'aggiornamento del 20/11/2018, funziona anche con la 2020 attuale (provato in questi giorni).
Aggiungo che (come si evince anche da questo post) ci sono molteplici metodi per arrivare ad un risultato. L'unica cosa che è da tenere in considerazione, quando si usano codici extrai, è la quasi certezza che prima o poi alcuni dovranno essere adeguati agli eventuali cambiamenti di WS, a meno che non abbiano implementato la funzione richiesta (è successo varie volte).
Sono anche convinto che se qualche "pazzo" (alcuni sono spariti) non avesse mai iniziato a postare "codici extra" per WS, rimanendo nell'ottica dell'usare il programma per quello che offre oppure consigliando il post-editing, probabilmente qualche cliente avrebbe già abbandonato il programma.
Ovviamente questo è il mio pensiero, il pensiero di un utente di vecchia data (anche se sono rimasto alla versione 17) che nel corso degli anni ne ha letti molti di pensieri altrui, forse troppi.
Il tuo esempio agisce pur sempre solo sull'oggetto testo (o sbaglio?)
Dal post di apertura io leggo
"Ho letto un'altra discussione in merito, e si consiglia Accordion Text, il quale però non mi permette di mantenere il testo e le figure così come roportato, ma solo il testo."
Solo in questi casi mi permetto di segnalare il mio esempio, che agisce su qualsiasi oggetto (insisto su qualsiasi, cioè immagini, tabelle, ecc.) di X5
L'autore Fabio B è soddisfatto del codice di Kolasim, e sta più che bene.
Personalmente non capisco la necessità e l'utilità di individuare tutti i selettori su cui agire e scrivere delle regole per ognuno di essi (fra l'altro sono un po' contrario ai codici in linea).
Con il mio sistema è sufficiente:
e fin qui siamo agli strumenti standard di X5
Dopo di che:
C'è qualcosa che mi sfugge?
Funziona anche con gli altri oggetti in quanto è legato alle ancore inserite...
Quoto, anche a me sta più che bene. Spero si sia capito che il mio intervento non voleva essere una "gara a chi lo ha più lungo" (perdonate la frase poco raffinata), ho aspettato proprio la "fine" per intervenire.
Se postavo solo l'ultima parte del mio post, magari poteva essere letto/considerato come OT, quindi ho aggiunto un'alternativa, tra l'atro vecchissima e forse da ottimizzare per le ultimissime versioni, per renderlo diciamo "utile".