0
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;
}
3
Contributors
7
Replies
20
Views
4 Years
Discussion Span
Last Post by ANDIBEVAPI
0

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

0

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"?

0

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>
0

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.
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.