Nascondere/mostrare una sezione di una pagina
Autor: Ferdinando C.Buonasera a tutti.
Espongo qual'è il mio problema (perdonatemi la scarsa competenza sul prodotto ma ho cominciato da poco, ho cercato invano una soluzione leggendo altri post ma non ci sono riuscito).
Vorrei inserire in una pagina una sezione "nascosta" per default. Questa sezione dovrebbe attivarsi espandendosi verticalmente al di sotto di una frase classica del tipo "leggi tutto...".
Ancora più carino sarebbe se, dopo essersi espansa, ci fosse la possibilità di nasconderla nuovamente cliccando su una frase del tipo "leggi meno..." o qualcosa del genere.
Tutto quello che ho trovato sul forum mi riconduce ad aprire una popup o una shwbox ma non è quello che vorrei fare io.
Non so se sono riuscito ad esprimermi correttamente.
Grazie a prescondere per la pazienza ed eventuale supporto.
Saluti
una cosa tipo questa?
http://provews.altervista.org/leggitutto/
oppure:
http://www.mirboprova.altervista.org/@beta_14-2/pagina-27.html
@Ferdinando , quello di cui parli si chiama "accordion"
https://www.w3schools.com/howto/howto_js_accordion.asp
... oppure aggiungo, ...trattandosi sempre di soluzione EXTRA, ...che con il "fai da te", ...potresti usare il metodo JS div_sino che avevo proposto diversi anni fa; ...purtroppo gli esempi sono andati estinti, ma ripensandoci, sarebbe semplice da ottenere...
... purtroppo non ho il programma, ma nel caso di interessasse, posta il LINK della pagina, con i due testi, l'anteprima e lo sviluppo del testo, in due oggetti incolonnati, possibilmente senza altri oggetti affiancati, e poi vedremo il da farsi, che alla fin fine potrebbe! risulterebbe semplice, e senza effetti extra...
.
Questo è stato realizzato per la versione EVO 13, ma credo possa adattarsi anche alla 14
http://www.essedi.altervista.org/_EVO13/_showhide/index.html
Autor
Intanto vi ringrazio per gli aiuti.
Dalle Vs. risposte mi pare però di capire che non esiste nulla di nativo in WebSite X5 pro v.14) che mi aiuti a risolvere il problema.
Devo necessariamente ricorrere a codice aggiuntivo (avrei voluto evitare).
Per il momento ho trovato come alternativa la showbox, peccato che non se ne riesca a gestire in alcun modo la larghezza.
Pensate che se guardo il sito da smartphone, la showbox è larga al massimo un paio di cm e non c'è modo di allargarla :-(
Ciao, in realtà qualcosa del genere si più ‘simulare’ con l’uso di testo su più schede, ma il problema è che lo spazio che sarà diempito dal testo da espandere rimarrà inizialmente vuoto. Ma se posso permettermi, gli esempi che hanno postato sono semplicissimi da integrare (ho provato in pochi minuti quello suggerito da Claudio e funziona alla perfezione ed è facile da usare). Vedi tu cosa ti conviene fare.
Autor
Ci proverò. Sulla larghezza della showbox mi devo rassegnare??? C'è un modo per modificarla?
Grazie
... prova con il metodo di EsseDi ... dettagliato in tutti i passaggi e con varie opzioni personalizzabili, basta un minimo di impegno; oppure con un copia/incolla quelli proposti da Mirko e Claudio...
... tempo fa per verificare avevo fatto una rapida prova con gli >> IFRAME ...molto flessibili per contenuti esterni, magari adatto per pagine nascoste del progetto stesso...
.
Mi sono accorto di avere pubblicato erroneamente il sito realizzato per la versione 11.
Ho provveduto a correggere l'errore, per cui ora cliccando sul link segnalato si apre correttamente il sito della versione 13
Nel frattempo ho verificato la validità dei codici anche per la versione 14 e ne ho pubblicato il sito.
Ricapitolando:
http://www.essedi.altervista.org/_EVO13/_showhide/index.html per la versione EVO 13
http://www.essedi.altervista.org/_EVO14/_showhide/index.html per la versione EVO 14
I codicici sono praticamenteb identici.
Autor
Da scartare gli IFRAME perchè a quanto pare vengono deprecati da Google. Me lo confermate?
... )))) ...è da 15 anni che si dice che sono deprecati! ...e proprio google ne fa uso ...)))
...ma no ... ti confondi con il TAG FRAME !
https://www.w3schools.com/tags/tag_frame.asp
l'iframe è un'altra cosa... e non è deprecato...
https://www.w3schools.com/tags/tag_iframe.asp
Autor
perdonatemi per l'ignoranza!!!
in ogni caso sarò io una schiappa ma per me aggiungere codice HTML è una roba tabù...
La difficoltà che incontro è che non riesco a mantenere la formattazione di testo/colori all'interno della pagina se non inserendo tale formattazione all'interno del codice HTML (cosa che gradirei evitare)
Ho provato a risolvere la questione utilizzando lo shwbox ma il problema dello showbox (come suddetto nei precedenti post) è che non riesco a gestirne la larghezza sullo smartphone (diventa una colonna microscopica illeggibile).
A tal proposito vorrei dare un suggerimento agli autori dell'applicazione (se non è una roba troppo complessa): ho notato che nascondendo una riga (dalla sezione responsive) alle risoluzioni superiori questa viene nascosta anche a risoluzioni inferiori.
Sarebbe carino invece se il mostra/nascondi fosse più flessibile a qualunque risoluzione (ad esempio, nascondo qualcosa a risoluzioni superiori che invece mostro a risoluzioni inferiori e/o viceversa).
In questo modo riuscirei a determinare la larghezza esatta della showbox ad una determinata risoluzione (e valida solo per quella) in modo da non comprometterne la visualizzazione ad altre risoluzioni.
Non so voi cosa ne pensate.
Autor
Proseguo il thread per chiarire meglio. Ho provato ad applicare il metodo EsseDi ma nonostante abbia fatto copia incolla degli esempi non riesco ad attivare il pulsante (NON VEDO IL PULSANTE).
Tra l'altro non ho capito dove devo collocare esattamente l'immagine dei pulsanti...
Vorrei specificare però che nell'esempio di EsseDi nel codice vedo testo e colori.
Quello che io vorrei fare è una roba semplicissima: inserire nel codice solo il richiamo all'apertura/chiusura mentre per testo, colori e formattazione sfruttare le potenzialità di WebSite (utilizzando i suoi box di testo).
Mentre scrivo vedo che il mio post (precedente a questo) utilizza il metodo che vorrei applicare io (se guardate in coda c'è una stringa LEGGI DI PIU' e/o MOSTRA MENO che fa esattamente quello che vorrei io).
C'è la possibilità di applicarlo in modo light come suddetto?
Grazie a tutti
Sono stato tratto in inganno dalla parola “sezione”. Credendo, erroneamente, che ci si riferisse a più oggetti e non ad un semplice testo, ho proposto il mio sistema.
Proseguo il thread per chiarire meglio. Ho provato ad applicare il metodo EsseDi ma nonostante abbia fatto copia incolla degli esempi non riesco ad attivare il pulsante (NON VEDO IL PULSANTE).
Tra l'altro non ho capito dove devo collocare esattamente l'immagine dei pulsanti...
Assodato che una simile funzione non è direttamente prevista da X5, qualsiasi metodo si voglia utilizzare presuppone la capacità di inserire materiale esterno nel progetto
Quello che io vorrei fare è una roba semplicissima: inserire nel codice solo il richiamo all'apertura/chiusura mentre per testo, colori e formattazione sfruttare le potenzialità di WebSite (utilizzando i suoi box di testo).
Questo è possibile solo con il mio metodo. Gli altri esempi di accordion proposti implicano che il testo sia inserito in un oggetto HTML
Credo che il mio procedimento sia spiegato abbastanza bene nel sito.
Per chi ha un minimo di esperienza, non dovrebbe essere difficile, analizzando il codice del mio sito, scaricare ed inserire nel proprio sito le risorse richieste, che poi sono una immagine, un codice CSS ed un codice js.
Per i meno esperti, di seguito fornisco una breve spiegazione
Dalla versione per EVO 14, scaricare i file sdBtn.png, sd_showhide.css e, secondo le proprie esigenze, uno o più file js, per esempio sd_show_libero_chiuso.js (tasto destro del mouse sul nome, quindi “Salva destinazione con nome…)
<link rel="stylesheet" href="files/sd_showhide.css" type="text/css" />
<script type="text/javascript" src="files/sd_show_libero_chiuso.js"></script>
<div class = "sdBtn" id = "qualunquenomeid"> Testo del pulsante </div>
Come spiegato anche nel sito di esempio:
class = "sdBtn" è obbligatorio
il nome dell’id può essere scelto a piacere
Testo del pulsante può anche mancare
Tutto qui.
Autor
Intanto ti mando un grazie 1.000.000 per la pazienza
Conto nel weekend di provare e di mettere finalmente fine a questo thread.
GRAZIE ANCORA
Autor
E' perfetto sei un grande!!!
Due cosucce e poi ti mando 1.000.000 di LIKE!
Intanto non sono riuscito a delimitare l'altezza a 46px (non so come si fa) dell'oggetto codice (ma me la sono cavata inserendo il codice all'interno del box di testo, in coda al testo)
Se ci fosse la possibilità di modificare la label a seconda se vedo più testo o meno sarebbe il massimo (come i post precedenti, viene visualizzata la label LEGGI DI PIU' a sezione chiusa, LEGGI DI MENO a sezione aperta).
In ogni caso come suddetto ti ringrazio per l'aiuto.
CIAO
Ottimo! Così facendo il tasto Apri-Chiudi viene posizionato in fondo al testo da mostrare-nascondere
Comunque quando apri un oggetto HTML per inserirne il contenuto l'ultima riga in basso permette di specificarne l'altezza: c'è proprio scritto "Altezza"
Se ci fosse la possibilità di modificare la label a seconda se vedo più testo o meno sarebbe il massimo (come i post precedenti, viene visualizzata la label LEGGI DI PIU' a sezione chiusa, LEGGI DI MENO a sezione aperta).
Questo è spiegato (e credo abbastanza bene) all'interno della sezione "Come si fa":
Il testo all'interno del div (Come funziona) costituisce il titolo del pulsante. Esso ovviamente può mancare. Supponiamo di volere realizzare il classico pulsante con le diciture "Apri" o "Chiudi". Sarà sufficiente includere il testo all'interno delle immagini del pulsante e non inserire alcun testo nel div, che quindi diventerebbe:
<div class = "sdBtn" id = "sdBtnFnz" </div>
Autor
GRANDISSIMO!!!!
TI QUOTO!!!
...!... per correttezza dovresti assegnare il CORRETTO alla risposta risolutica utile e corretta...!...
.
Autor
Concludo solo un attimo evidenziando che inserendo il codice in coda al box di testo, accade un fatto strano:
l'hamburger menu non si apre più correttamente :-(
Su web tutto OK ma osservando il sito dai browser su smartphone, l'unico che visualizza correttamente l'hamburger menu è Firefox mentre per vedere il menu sugli altri browser occorre rimpicciolire la pagina...
Ho risolto inserendo il codice in un box dedicato (come da esempio EsseDi)...
Hasta la Vista :-)
Ferdinando ti ricordo che sul Forum funziona così:
Per ringraziare gli utenti che ti rispondono, puoi cliccare su "utile" (la manina verde col pollice in su) sotto al loro post...
Quando il post sarà risolto è buona norma cliccare su "Corretto" (la spunta verde) al post che ti ha risolto (NON a te stesso, a meno che non risolvi da solo) , per chiudere il post e far sapere alle altre persone che potrebbero avere un problema come il tuo che quella è la soluzione.
Se hai altre domande non legate strettamente al post che hai aperto, apri un nuovo post.
Autor
scusate, fatto!
Autor
Buongiorno a tutti.
Mi rivolgo in particolare a @EsseDi che mi ha risolto il problema per espandere/comprimere intere sezioni di testo/grafica all'interno del mio portale.
Ho ancora un paio di problemi per raggiungere la perfezione:
Allego al presente post i 3 files che adopero per gestire il pulsante "sdBtn.png".
Specifico che ho inserito:
<link rel="stylesheet" href="files/sd_showhide.css" type="text/css" />
<script type="text/javascript" src="files/sd_show_libero_chiuso.js"></script>
Spero nell'aiuto risolutivo :-)
... hai chiuso questo argomento con il corretto/risolto...
... se continui con le domande, o riabiliti l'Argomento, oppure ne apri uno nuovo facendo riferimento a questo con un link, ...altrimenti qui non potrai ottenere interventi da terzi...
.