Curta Nossa Página do Facebook!


  • Desenvolvido Por Iago Melanias

    Botão de Spoiler com Jquery

    Eaew galera,eu com mais um tuto u..u,dessa vez e um botão de spoiler,muito usado em blogs para naum ficar muita coisa na tela,confiram o exemplo aqui

    Para aplicar primeiro procure por:
    </head>

    E acima disso cole:
    <script type='text/javascript'>
    jQuery.fn.toggleText = function(a,b) {
    return   this.html(this.html().replace(new RegExp(&quot;(&quot;+a+&quot;|&quot;+b+&quot;)&quot;),function(x){return(x==a)?b:a;}));
    }

    $(document).ready(function(){
    $(&#39;.tgl&#39;).before(&#39;<span>Mostrar conteúdo</span>&#39;);
    $(&#39;.tgl&#39;).css(&#39;display&#39;, &#39;none&#39;)
    $(&#39;span&#39;, &#39;#box-toggle&#39;).click(function() {
    $(this).next().slideToggle(&#39;slow&#39;)
    .siblings(&#39;.tgl:visible&#39;).slideToggle(&#39;fast&#39;);
    // aqui começa o funcionamento do plugin
    $(this).toggleText(&#39;Mostrar&#39;,&#39;Esconder&#39;)
    .siblings(&#39;span&#39;).next(&#39;.tgl:visible&#39;).prev()
    .toggleText(&#39;Mostrar&#39;,&#39;Esconder&#39;)
    });
    })
    </script>


    Agore procure por:
    ]]></b:skin>

    Acima disso cole:
    #box-toggle span{
    background:#ff7777;
    padding:0px 0px 0px 4px;
    display:block;
    cursor:pointer;
    font-weight:bold;
    font-family:arial;
    font-size:14px;
    color:#000;
    margin-top:1px;
    border-radius:5px;
    -webkit-border-radius:5px;
    }


    Agora o HTML do botão - Cole o codigo abaixo aonde for usar o botão,(Postagens,HTML/Javascript...)
    <div id="box-toggle">

    <div class="tgl">
    <h2>
    Conteúdo AKIE</h2>
    </div>

    <div class="tgl">
    <h2>
    Conteúdo AKIE</h2>
    </div>

    </div>

    0 Deixe um Comentário:

    Postar um comentário