Visualizzazione risultati 1 fino 3 di 3

Discussione: [JS] Apertura/chiusura con più div ma non insieme

  1. #1
    Guest

    Predefinito [JS] Apertura/chiusura con più div ma non insieme

    Ciao a tutti, sto cercando un codice JS molto semplice che dato un certo numero questi si aprano e si chiudano solo se l'utente ci clicca. Quindi se io clicco sul div con numero 4 tutti gli altri dovranno avere la classe "hidden" e viceversa. Di default, però, il primo div dovrà essere aperto... è possibile? La struttura è questa (solo 5 div):
    Codice PHP:
    <ul><li><a id="first" onClick="show(1);" href="#">Title</a></li></ul>
    <
    div id="text" class="hidden 1">
    <
    p>Lorem ipsum cetero bonorum consetetur usu eu, ad mei simul legendos voluptaria. Has assum suscipit instructior ne, brute delectus an vim. Eu qui quot lobortis salutandi, tamquam fuisset vulputate nec id, an adhuc labores dissentiet per. Porro volumus percipitur id quo, prima utinam maiorum ut sed, an tempor nonummy verterem sea. Eum an nulla verterem, sit vocent intellegat ad. No nisl autem temporibus ius, vix te nostrud abhorreant, mea ea alia augue.</p>
    <
    p>Mei everti postulant cu, eos ex decore noster. Ea eos sanctus nonummy, mea ei brute electram inciderint, sit cu numquam ornatus. In pri nonumy populo dictas. Saperet iracundia reprimique cu sit, ei duo quas fugit ancillae, accusamus disputando philosophia et mel.</p>
    <
    p>Illum timeam inimicus ei nec, eu ullum falli honestatis eum. Possim indoctum sententiae te cum. Clita putant ea sit, ei pro wisi dictas, no usu odio noster vivendo. Sed nobis populo expetendis an.</p>
    <
    p>Ex vix simul petentium euripidis, natum delectus eu pro. Discere apeirian posidonium vis at, vis vocibus accusata definitionem et, ius veri solum et. Ut nam munere incorrupte. Tempor dolorum intellegebat mei ea, eam dissentiet appellantur voluptatibus te, cibo rationibus accommodare nec ne. Quo ex alienum postulant, augue efficiantur an per.</p>
    <
    p>Modus nostrum et est, eu nostrum propriae adipisci ius. Te probo bonorum usu. Mei dolor semper ei, eos te facete invidunt expetendis, his ei dicunt dolores. Ne cum habeo aliquid tractatos, convenire vulputate no vis. Et sed fugit postea, munere pericula no usu. No nam aeque inimicus.</p>
    </
    div>

    <
    ul><li><a id="second" onClick="show(2);" href="#">Title</a></li></ul>
    <
    div id="text" class="hidden 2">
    <
    p>Lorem ipsum cetero bonorum consetetur usu eu, ad mei simul legendos voluptaria. Has assum suscipit instructior ne, brute delectus an vim. Eu qui quot lobortis salutandi, tamquam fuisset vulputate nec id, an adhuc labores dissentiet per. Porro volumus percipitur id quo, prima utinam maiorum ut sed, an tempor nonummy verterem sea. Eum an nulla verterem, sit vocent intellegat ad. No nisl autem temporibus ius, vix te nostrud abhorreant, mea ea alia augue.</p>
    <
    p>Mei everti postulant cu, eos ex decore noster. Ea eos sanctus nonummy, mea ei brute electram inciderint, sit cu numquam ornatus. In pri nonumy populo dictas. Saperet iracundia reprimique cu sit, ei duo quas fugit ancillae, accusamus disputando philosophia et mel.</p>
    <
    p>Illum timeam inimicus ei nec, eu ullum falli honestatis eum. Possim indoctum sententiae te cum. Clita putant ea sit, ei pro wisi dictas, no usu odio noster vivendo. Sed nobis populo expetendis an.</p>
    <
    p>Ex vix simul petentium euripidis, natum delectus eu pro. Discere apeirian posidonium vis at, vis vocibus accusata definitionem et, ius veri solum et. Ut nam munere incorrupte. Tempor dolorum intellegebat mei ea, eam dissentiet appellantur voluptatibus te, cibo rationibus accommodare nec ne. Quo ex alienum postulant, augue efficiantur an per.</p>
    <
    p>Modus nostrum et est, eu nostrum propriae adipisci ius. Te probo bonorum usu. Mei dolor semper ei, eos te facete invidunt expetendis, his ei dicunt dolores. Ne cum habeo aliquid tractatos, convenire vulputate no vis. Et sed fugit postea, munere pericula no usu. No nam aeque inimicus.</p>
    </
    div>

    <
    ul><li><a id="third" onClick="show(3);" href="#">Title</a></li></ul>
    <
    div id="text" class="hidden 3">
    <
    p>Lorem ipsum cetero bonorum consetetur usu eu, ad mei simul legendos voluptaria. Has assum suscipit instructior ne, brute delectus an vim. Eu qui quot lobortis salutandi, tamquam fuisset vulputate nec id, an adhuc labores dissentiet per. Porro volumus percipitur id quo, prima utinam maiorum ut sed, an tempor nonummy verterem sea. Eum an nulla verterem, sit vocent intellegat ad. No nisl autem temporibus ius, vix te nostrud abhorreant, mea ea alia augue.</p>
    <
    p>Mei everti postulant cu, eos ex decore noster. Ea eos sanctus nonummy, mea ei brute electram inciderint, sit cu numquam ornatus. In pri nonumy populo dictas. Saperet iracundia reprimique cu sit, ei duo quas fugit ancillae, accusamus disputando philosophia et mel.</p>
    <
    p>Illum timeam inimicus ei nec, eu ullum falli honestatis eum. Possim indoctum sententiae te cum. Clita putant ea sit, ei pro wisi dictas, no usu odio noster vivendo. Sed nobis populo expetendis an.</p>
    <
    p>Ex vix simul petentium euripidis, natum delectus eu pro. Discere apeirian posidonium vis at, vis vocibus accusata definitionem et, ius veri solum et. Ut nam munere incorrupte. Tempor dolorum intellegebat mei ea, eam dissentiet appellantur voluptatibus te, cibo rationibus accommodare nec ne. Quo ex alienum postulant, augue efficiantur an per.</p>
    <
    p>Modus nostrum et est, eu nostrum propriae adipisci ius. Te probo bonorum usu. Mei dolor semper ei, eos te facete invidunt expetendis, his ei dicunt dolores. Ne cum habeo aliquid tractatos, convenire vulputate no vis. Et sed fugit postea, munere pericula no usu. No nam aeque inimicus.</p>
    </
    div>

    <
    ul><li><a id="fourth" onClick="show(4);" href="#">Title</a></li></ul>
    <
    div id="text" class="hidden 4">
    <
    p>Lorem ipsum cetero bonorum consetetur usu eu, ad mei simul legendos voluptaria. Has assum suscipit instructior ne, brute delectus an vim. Eu qui quot lobortis salutandi, tamquam fuisset vulputate nec id, an adhuc labores dissentiet per. Porro volumus percipitur id quo, prima utinam maiorum ut sed, an tempor nonummy verterem sea. Eum an nulla verterem, sit vocent intellegat ad. No nisl autem temporibus ius, vix te nostrud abhorreant, mea ea alia augue.</p>
    <
    p>Mei everti postulant cu, eos ex decore noster. Ea eos sanctus nonummy, mea ei brute electram inciderint, sit cu numquam ornatus. In pri nonumy populo dictas. Saperet iracundia reprimique cu sit, ei duo quas fugit ancillae, accusamus disputando philosophia et mel.</p>
    <
    p>Illum timeam inimicus ei nec, eu ullum falli honestatis eum. Possim indoctum sententiae te cum. Clita putant ea sit, ei pro wisi dictas, no usu odio noster vivendo. Sed nobis populo expetendis an.</p>
    <
    p>Ex vix simul petentium euripidis, natum delectus eu pro. Discere apeirian posidonium vis at, vis vocibus accusata definitionem et, ius veri solum et. Ut nam munere incorrupte. Tempor dolorum intellegebat mei ea, eam dissentiet appellantur voluptatibus te, cibo rationibus accommodare nec ne. Quo ex alienum postulant, augue efficiantur an per.</p>
    <
    p>Modus nostrum et est, eu nostrum propriae adipisci ius. Te probo bonorum usu. Mei dolor semper ei, eos te facete invidunt expetendis, his ei dicunt dolores. Ne cum habeo aliquid tractatos, convenire vulputate no vis. Et sed fugit postea, munere pericula no usu. No nam aeque inimicus.</p>
    </
    div>


    <
    ul><li><a id="fifth" onClick="show(5);" href="#">Title</a></li></ul>
    <
    div id="text" class="hidden 5">
    <
    p>Lorem ipsum cetero bonorum consetetur usu eu, ad mei simul legendos voluptaria. Has assum suscipit instructior ne, brute delectus an vim. Eu qui quot lobortis salutandi, tamquam fuisset vulputate nec id, an adhuc labores dissentiet per. Porro volumus percipitur id quo, prima utinam maiorum ut sed, an tempor nonummy verterem sea. Eum an nulla verterem, sit vocent intellegat ad. No nisl autem temporibus ius, vix te nostrud abhorreant, mea ea alia augue.</p>
    <
    p>Mei everti postulant cu, eos ex decore noster. Ea eos sanctus nonummy, mea ei brute electram inciderint, sit cu numquam ornatus. In pri nonumy populo dictas. Saperet iracundia reprimique cu sit, ei duo quas fugit ancillae, accusamus disputando philosophia et mel.</p>
    <
    p>Illum timeam inimicus ei nec, eu ullum falli honestatis eum. Possim indoctum sententiae te cum. Clita putant ea sit, ei pro wisi dictas, no usu odio noster vivendo. Sed nobis populo expetendis an.</p>
    <
    p>Ex vix simul petentium euripidis, natum delectus eu pro. Discere apeirian posidonium vis at, vis vocibus accusata definitionem et, ius veri solum et. Ut nam munere incorrupte. Tempor dolorum intellegebat mei ea, eam dissentiet appellantur voluptatibus te, cibo rationibus accommodare nec ne. Quo ex alienum postulant, augue efficiantur an per.</p>
    <
    p>Modus nostrum et est, eu nostrum propriae adipisci ius. Te probo bonorum usu. Mei dolor semper ei, eos te facete invidunt expetendis, his ei dicunt dolores. Ne cum habeo aliquid tractatos, convenire vulputate no vis. Et sed fugit postea, munere pericula no usu. No nam aeque inimicus.</p>
    </
    div>
    Attenzione però, poiché (mi sono ricordato che) i div non si aprono cliccandoci "direttamente" ma da un menù xD
    Grazie mille, ciao Davide! ^^

    Edit: ho fatto questo, ma non funziona!! =(
    Codice PHP:
    function show(number)
    {
    div = document.getElementsByClassName("hidden "+number);
    status = div.style.display;
    if(
    status=="none") { status = "visible"; }
    else {
    status = "none"; }
    }
    Ultima modifica di sIM : 03-09-2010 alle ore 16.24.08

  2. #2
    slavettosoft non è connesso Neofita
    Data registrazione
    09-08-2010
    Messaggi
    26

    Predefinito

    ecco qui :

    Codice HTML:
    <style>
    			.hidden {
    				display: none;
    			}
    			.normal{
    				display: inline;
    			}
    		</style>
    		
    		<script type="text/javascript">
    			function show(num){
    				for(i = 1; i<=5; i++){
    					if(i != num){
    						document.getElementById(i).setAttribute("class","hidden");
    					}
    				}
    				document.getElementById(num).setAttribute("class","normal");
    			}
    		</script>
    		
    		<li><a id="first" onClick="show(1);" href="#">Title</a></li>
            <div id="1">
            <p>Lorem ipsum cetero bonorum consetetur usu eu, ad mei simul legendos voluptaria. Has assum suscipit instructior ne, brute delectus an vim. Eu qui quot lobortis salutandi, tamquam fuisset vulputate nec id, an adhuc labores dissentiet per. Porro volumus percipitur id quo, prima utinam maiorum ut sed, an tempor nonummy verterem sea. Eum an nulla verterem, sit vocent intellegat ad. No nisl autem temporibus ius, vix te nostrud abhorreant, mea ea alia augue.</p>
            <p>Mei everti postulant cu, eos ex decore noster. Ea eos sanctus nonummy, mea ei brute electram inciderint, sit cu numquam ornatus. In pri nonumy populo dictas. Saperet iracundia reprimique cu sit, ei duo quas fugit ancillae, accusamus disputando philosophia et mel.</p>
            <p>Illum timeam inimicus ei nec, eu ullum falli honestatis eum. Possim indoctum sententiae te cum. Clita putant ea sit, ei pro wisi dictas, no usu odio noster vivendo. Sed nobis populo expetendis an.</p>
            <p>Ex vix simul petentium euripidis, natum delectus eu pro. Discere apeirian posidonium vis at, vis vocibus accusata definitionem et, ius veri solum et. Ut nam munere incorrupte. Tempor dolorum intellegebat mei ea, eam dissentiet appellantur voluptatibus te, cibo rationibus accommodare nec ne. Quo ex alienum postulant, augue efficiantur an per.</p>
            <p>Modus nostrum et est, eu nostrum propriae adipisci ius. Te probo bonorum usu. Mei dolor semper ei, eos te facete invidunt expetendis, his ei dicunt dolores. Ne cum habeo aliquid tractatos, convenire vulputate no vis. Et sed fugit postea, munere pericula no usu. No nam aeque inimicus.</p>
            </div>
    		
            <li><a id="second" onClick="show(2);" href="#">Title</a></li>>
            <div id="2" class="hidden">
            <p>Lorem ipsum cetero bonorum consetetur usu eu, ad mei simul legendos voluptaria. Has assum suscipit instructior ne, brute delectus an vim. Eu qui quot lobortis salutandi, tamquam fuisset vulputate nec id, an adhuc labores dissentiet per. Porro volumus percipitur id quo, prima utinam maiorum ut sed, an tempor nonummy verterem sea. Eum an nulla verterem, sit vocent intellegat ad. No nisl autem temporibus ius, vix te nostrud abhorreant, mea ea alia augue.</p>
            <p>Mei everti postulant cu, eos ex decore noster. Ea eos sanctus nonummy, mea ei brute electram inciderint, sit cu numquam ornatus. In pri nonumy populo dictas. Saperet iracundia reprimique cu sit, ei duo quas fugit ancillae, accusamus disputando philosophia et mel.</p>
            <p>Illum timeam inimicus ei nec, eu ullum falli honestatis eum. Possim indoctum sententiae te cum. Clita putant ea sit, ei pro wisi dictas, no usu odio noster vivendo. Sed nobis populo expetendis an.</p>
            <p>Ex vix simul petentium euripidis, natum delectus eu pro. Discere apeirian posidonium vis at, vis vocibus accusata definitionem et, ius veri solum et. Ut nam munere incorrupte. Tempor dolorum intellegebat mei ea, eam dissentiet appellantur voluptatibus te, cibo rationibus accommodare nec ne. Quo ex alienum postulant, augue efficiantur an per.</p>
            <p>Modus nostrum et est, eu nostrum propriae adipisci ius. Te probo bonorum usu. Mei dolor semper ei, eos te facete invidunt expetendis, his ei dicunt dolores. Ne cum habeo aliquid tractatos, convenire vulputate no vis. Et sed fugit postea, munere pericula no usu. No nam aeque inimicus.</p>
            </div>
            
            <li><a id="third" onClick="show(3);" href="#">Title</a></li>
            <div id="3" class="hidden">
            <p>Lorem ipsum cetero bonorum consetetur usu eu, ad mei simul legendos voluptaria. Has assum suscipit instructior ne, brute delectus an vim. Eu qui quot lobortis salutandi, tamquam fuisset vulputate nec id, an adhuc labores dissentiet per. Porro volumus percipitur id quo, prima utinam maiorum ut sed, an tempor nonummy verterem sea. Eum an nulla verterem, sit vocent intellegat ad. No nisl autem temporibus ius, vix te nostrud abhorreant, mea ea alia augue.</p>
            <p>Mei everti postulant cu, eos ex decore noster. Ea eos sanctus nonummy, mea ei brute electram inciderint, sit cu numquam ornatus. In pri nonumy populo dictas. Saperet iracundia reprimique cu sit, ei duo quas fugit ancillae, accusamus disputando philosophia et mel.</p>
            <p>Illum timeam inimicus ei nec, eu ullum falli honestatis eum. Possim indoctum sententiae te cum. Clita putant ea sit, ei pro wisi dictas, no usu odio noster vivendo. Sed nobis populo expetendis an.</p>
            <p>Ex vix simul petentium euripidis, natum delectus eu pro. Discere apeirian posidonium vis at, vis vocibus accusata definitionem et, ius veri solum et. Ut nam munere incorrupte. Tempor dolorum intellegebat mei ea, eam dissentiet appellantur voluptatibus te, cibo rationibus accommodare nec ne. Quo ex alienum postulant, augue efficiantur an per.</p>
            <p>Modus nostrum et est, eu nostrum propriae adipisci ius. Te probo bonorum usu. Mei dolor semper ei, eos te facete invidunt expetendis, his ei dicunt dolores. Ne cum habeo aliquid tractatos, convenire vulputate no vis. Et sed fugit postea, munere pericula no usu. No nam aeque inimicus.</p>
            </div>
            
            <li><a id="fourth" onClick="show(4);" href="#">Title</a></li>
            <div id="4" class="hidden">
            <p>Lorem ipsum cetero bonorum consetetur usu eu, ad mei simul legendos voluptaria. Has assum suscipit instructior ne, brute delectus an vim. Eu qui quot lobortis salutandi, tamquam fuisset vulputate nec id, an adhuc labores dissentiet per. Porro volumus percipitur id quo, prima utinam maiorum ut sed, an tempor nonummy verterem sea. Eum an nulla verterem, sit vocent intellegat ad. No nisl autem temporibus ius, vix te nostrud abhorreant, mea ea alia augue.</p>
            <p>Mei everti postulant cu, eos ex decore noster. Ea eos sanctus nonummy, mea ei brute electram inciderint, sit cu numquam ornatus. In pri nonumy populo dictas. Saperet iracundia reprimique cu sit, ei duo quas fugit ancillae, accusamus disputando philosophia et mel.</p>
            <p>Illum timeam inimicus ei nec, eu ullum falli honestatis eum. Possim indoctum sententiae te cum. Clita putant ea sit, ei pro wisi dictas, no usu odio noster vivendo. Sed nobis populo expetendis an.</p>
            <p>Ex vix simul petentium euripidis, natum delectus eu pro. Discere apeirian posidonium vis at, vis vocibus accusata definitionem et, ius veri solum et. Ut nam munere incorrupte. Tempor dolorum intellegebat mei ea, eam dissentiet appellantur voluptatibus te, cibo rationibus accommodare nec ne. Quo ex alienum postulant, augue efficiantur an per.</p>
            <p>Modus nostrum et est, eu nostrum propriae adipisci ius. Te probo bonorum usu. Mei dolor semper ei, eos te facete invidunt expetendis, his ei dicunt dolores. Ne cum habeo aliquid tractatos, convenire vulputate no vis. Et sed fugit postea, munere pericula no usu. No nam aeque inimicus.</p>
            </div>
    		
            <li><a id="fifth" onClick="show(5);" href="#">Title</a></li>
            <div id="5" class="hidden">
            <p>Lorem ipsum cetero bonorum consetetur usu eu, ad mei simul legendos voluptaria. Has assum suscipit instructior ne, brute delectus an vim. Eu qui quot lobortis salutandi, tamquam fuisset vulputate nec id, an adhuc labores dissentiet per. Porro volumus percipitur id quo, prima utinam maiorum ut sed, an tempor nonummy verterem sea. Eum an nulla verterem, sit vocent intellegat ad. No nisl autem temporibus ius, vix te nostrud abhorreant, mea ea alia augue.</p>
            <p>Mei everti postulant cu, eos ex decore noster. Ea eos sanctus nonummy, mea ei brute electram inciderint, sit cu numquam ornatus. In pri nonumy populo dictas. Saperet iracundia reprimique cu sit, ei duo quas fugit ancillae, accusamus disputando philosophia et mel.</p>
            <p>Illum timeam inimicus ei nec, eu ullum falli honestatis eum. Possim indoctum sententiae te cum. Clita putant ea sit, ei pro wisi dictas, no usu odio noster vivendo. Sed nobis populo expetendis an.</p>
            <p>Ex vix simul petentium euripidis, natum delectus eu pro. Discere apeirian posidonium vis at, vis vocibus accusata definitionem et, ius veri solum et. Ut nam munere incorrupte. Tempor dolorum intellegebat mei ea, eam dissentiet appellantur voluptatibus te, cibo rationibus accommodare nec ne. Quo ex alienum postulant, augue efficiantur an per.</p>
            <p>Modus nostrum et est, eu nostrum propriae adipisci ius. Te probo bonorum usu. Mei dolor semper ei, eos te facete invidunt expetendis, his ei dicunt dolores. Ne cum habeo aliquid tractatos, convenire vulputate no vis. Et sed fugit postea, munere pericula no usu. No nam aeque inimicus.</p>
            </div>
    comunque, se devi nascondere del testo, non usare mai visibility:hidden ma bensì display: none; perché quest'ultima non mostrerà lo spazio occupato dal testo invisibile

  3. #3
    Guest

    Predefinito

    Mmm non ci siamo poiché, l'id è già impegnato io avevo pensato di metterlo come classe... non come id... è possibile? Cioè hidden 1, hidden 2, hidden 3, etc.... poi si andava estraendo togliendo hidden o aggiungendolo per trovare il div da mostrare/nascondere! =)
    Grazie mille.

    PS. Sapevo già quello che hai detto, l'unica cosa che non sapevo era il js xD

    Edit: ho risolto, ma il problema è che poi il primo div è sempre chiuso... non è aperto e poi quando se ne apre un altro si chiude xD
    Ri edit: ho trovato una valida alternativa usando JQuery con un feed che mi piace molto... l'unico problema e che quando ne chiudo uno, questo si chiude velocissimamente e poi si chiude come impostato da js... è perfettamente visibile inserendo 5000 nella funzione slideToggle o.O
    Codice PHP:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

    $(".text").hide();

    $(".link").click(function(){
    $(this).next(".text").slideToggle(1000);
    $(".link").next(".text").hide();
    });

    });
    </script>
    Grazie mille!! ^^
    Ultima modifica di sIM : 04-09-2010 alle ore 10.33.48

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •