Add another toggle button in the same page

[andi-dev]

the jsp cmlode and html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>This must be paste in head 


<a href="#" id="toggle-example2" class="button"></a>
    <div class="example2">
    <p>Una novità nei prodotti speciali!
La nostra IP Plus aumenta il numero di ottano, passando da 98 a 100 e dando così vita ad un nuovo prodotto altamente performante: plus 100.
L’aumento del numero di ottano permette un funzionamento più dolce e regolare del motore, abbinando un maggior rendimento ad un minor consumo. Viaggiare con una benzina a 100 ottani significa avere accelerazioni immediate, molto più fluide e senza quel leggero ritardo tra la pressione sul pedale e l’effettiva risposta del motore.
Questo prodotto speciale è particolarmente indicato per le motociclette e per le autovetture con elevate capacità di potenza, come quelle dotate di turbocompressore e/o di iniezione diretta del carburante.
Insomma, per supermotori: un superprodotto!</p>
</div>
<script type="text/Javascript">
$(document).ready(function() {
    $('.example2').hide().before('<a href="#" id="toggle-example2" class="button">Hap/Mbyll</a>');
    $('a#toggle-example2').click(function() {
        $('.example2').slideToggle(1000);
        return false;
    });
});
</script>




the CSS code 

.button{/*Modifikohet butoni Open Close*/
    background:#eee;
    border:0;
    color:#333;
    cursor:pointer;
    font-family:"Lucida Grande",Helvetica,Arial,Sans-Serif;
    margin:0;padding:6px 4px;
    text-decoration:none;
    position:relative
}
.example1 p, .example2 p{/*Modifikohet teksti qe shfaqet*/
    border: 1px solid #eee;
    border-radius: 8px;/*Kulmet e drejtkendeshit ku shfaqet teksti*/
    width: 500px;
    padding: 10px;/*Cakton pozicionin se ku do filloi teksti brenda drejtkendeshit*/
    margin: 10px;/*Me kte komande drejtkendeshi mund te shfaqet X px larg putonit*/
    background-color: #eee;
}

[andi-dev]

i wont to add more than 5 of this toggle button in the same page but i cant how i can fix the problem with your sugestions plz

[JorgeM]

What exactly do you need help with? You need to be a bit more specific as to the error you are getting or help that you need.

What do you specifically mean by "add another toggle button"?

[andi-dev]

i wont to add another toggle button in the same page, but i cant how can i create another button to display some text.
here is a example of what i wont to do.
http://www.ip.gruppoapi.com/prodotti/prodotti-speciali

[asmira]

style

    .toggle-example2{
        width:100px;
        height:35px;
        position:relative;
      }

      .button{/*Modifikohet butoni Open Close*/
        background:#eee;
        border:0;
        color:#333;
        cursor:pointer;
        font-family:"Lucida Grande",Helvetica,Arial,Sans-Serif;
        margin:0;padding:6px 4px;
        text-decoration:none;
        position:relative
    }

    .example p{/*Modifikohet teksti qe shfaqet*/
        border: 1px solid #eee;
        border-radius: 8px;/*Kulmet e drejtkendeshit ku shfaqet teksti*/
        width: 500px;
        padding: 10px;/*Cakton pozicionin se ku do filloi teksti brenda drejtkendeshit*/
        margin: 10px;/*Me kte komande drejtkendeshi mund te shfaqet X px larg putonit*/
        background-color: #eee;
    }

javascript

        $(document).ready(function() {

            $('.example').hide().before('<div class="toggle-example2"><a href="#" class="button">Hap/Mbyll</a></div>');

            $('.toggle-example2').click(function() {
                $('.example').not($(this).next()).hide(1000); //hide all examples. 'not selector' for remove duplicate action). slide speed 1000(1 second)
                $(this).next().slideToggle(1000);
            });
        });

html

    <div class="example">
        <p>
        Una novità nei prodotti speciali!
            La nostra IP Plus aumenta il numero di ottano, passando da 98 a 100 e dando così vita ad un nuovo prodotto altamente performante: plus 100.
            L’aumento del numero di ottano permette un funzionamento più dolce e regolare del motore, abbinando un maggior rendimento ad un minor consumo. Viaggiare con una benzina a 100 ottani significa avere accelerazioni immediate, molto più fluide e senza quel leggero ritardo tra la pressione sul pedale e l’effettiva risposta del motore.
            Questo prodotto speciale è particolarmente indicato per le motociclette e per le autovetture con elevate capacità di potenza, come quelle dotate di turbocompressore e/o di iniezione diretta del carburante.
            Insomma, per supermotori: un superprodotto!
        </p>
    </div>

[asmira]

changes

1. change button to div with a
2. change button`s id to class. to give same effect and style.
3. all context divs have same class. you can add any div with example class which has same effect.

[andi-dev]

if you can give me a example im beginer in JSP

[andi-dev]

i have don it thnx for sharing some ideas.se yaaaaa around :) :D