Per saperne di più/meno jQuery fisarmonica

Question

Sto cercando una fisarmonica jQuery come quella che può essere trovata sul avg website senza fortuna, quindi spero che qualcuno qui possa indicarmi la giusta direzione. Per il codice sorgente o un esempio.

Ho già la fisarmonica in funzione ma è la funzione di lettura/chiusura in più che manca e che voglio usare.

Answer 1

Jquery UI Accordion fa quello che vuoi. In particolare, guarda la funzionalità pieghevole.

esempio di lavoro: Fiddle

HTML

<div id="content"> 
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet,</p> 
    <div class="accordion"> 
     <h3>Read More</h3> 
     <p> nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> 
    </div> 
</div> 

jQuery UI (fisarmonica)

$(".accordion").accordion({ 
    active: false, 
    collapsible: true, 
    activate: function(event, ui) { 
     ui.newHeader.text("Close"); 
     ui.oldHeader.text("Read More"); 
    }, 
}); 

Poi basta stile al vostro gusto.

CSS

#content {border-bottom: 1px solid #999; padding-bottom: .5em; } 
#content .accordion { font-family: inherited; font-size: 100%; } 
#content .ui-accordion .ui-accordion-header { padding: 0; } 
#content .ui-accordion .ui-accordion-header-icon { display: none; } 
#content .accordion .ui-state-default, 
#content .accordion .ui-state-active { border: none; background: none; padding: 0; } 
#content .accordion .ui-widget-content { padding: 1em 0 0 .5em; border: none; } 

utilizzando jQuery UI può essere bello perché hanno già aggiunto cose come il supporto per i tasti UP/verso il basso e si può facilmente cambiare il tipo di animazione. Puoi anche catturare l'evento per l'attivazione e modificare il testo dell'intestazione se lo desideri.

Answer 2

Fiddle

HTML

<div class="wrap"> 
    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget 
     lacinia odio sem nec elit. 
    </p> 
    <a class="readmorebtn">Read more</a> 
    <p class="more">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 
     Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur 
     adipiscing elit. Maecenas faucibus mollis interdum. Etiam porta sem malesuada 
     magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl 
     consectetur. 
    </p> 
</div> 

jQuery

var moreText = "Read more", 
    lessText = "Read less", 
    moreButton = $("a.readmorebtn"); 

moreButton.click(function() { 
    var $this = $(this); 
    $this.text($this.text() == moreText ? lessText : moreText).next("p.more").slideToggle("fast"); 
}); 

Aggiornamento: accorciato il jQuery un po '.

Answer 3

Jquery UI è fantastico, ma è un sacco di cose extra solo per una piccola fisarmonica. Se hai intenzione di utilizzare tutte le funzionalità, allora fallo.

È anche possibile utilizzare i metodi jQuery show(), nascondere() o attivare(). Segui i link per saperne di questi, non li spiegherò qui.

Il problema con tutti questi è mostrare o nascondere TUTTO il testo, come dimostrano alcune delle altre risposte qui. Se si desidera mostrare una o due righe (o dieci) del testo attuale, quindi visualizzarlo tutto facendo clic su un pulsante/collegamento, è necessario un po 'più dei metodi predefiniti. Se vuoi solo un piccolo script per farlo, o vuoi solo capire come è fatto, ecco il mio piccolo plugin. Il mio script anima l'apertura e la chiusura della fisarmonica simile a show()/hide(), ma mostrerà una quantità predefinita di testo nella posizione chiusa.

Fiddle

Spero che questo aiuti

HTML

<div class="show-more-snippet"> 
//your text goes here// 
</div> 
<a href="#" class="show-more">More...</a> 

CSS

.show-more-snippet { 
    height:35px; /*this is set to the height of the how much text you want to show based on the font size, line height, etc*/ 
    width:300px; 
    overflow:hidden; 
} 

jQuery

$('.show-more').click(function() { 
    if($('.show-more-snippet').css('height') != '35px'){ 
     $('.show-more-snippet').stop().animate({height: '35px'}, 200); 
     $(this).text('More...'); 
    }else{ 
     $('.show-more-snippet').css({height:'100%'}); 
     var xx = $('.show-more-snippet').height(); 
     $('.show-more-snippet').css({height:'35px'}); 
     $('.show-more-snippet').stop().animate({height: xx}, 400); 
     // ^^ The above is beacuse you can't animate css to 100%. So I change it to 100%, get the value, change it back, then animate it to the value. If you don't want animation, you can ditch all of it and just leave: $('.show-more-snippet').css({height:'100%'});^^ // 
     $(this).text('Less...'); 
    } 

});

Answer 4

$.fn.wrap = function() { 
    var msg = $(this).text(); 
    selector = $(this).attr('id'); 
     if(msg.length > 60){ 
      $(this).html(msg.substring(0,40) + '...<span class="more_link cursor f-bold">[more]</span>'); 
     } 
     $('.more_link').live('click',function(){ 
      $('#'+selector).html(msg+' <span class="less_link cursor f-bold">[less]</span>'); 
     }); 
     $('.less_link').live('click',function(){ 
      $('#'+selector).html(msg.substring(0,40) + '...<span class="more_link cursor f-bold">[more]</span>'); 
     }); 
}; 
$(document).ready(function(){ 
    $('#validation_message').wrap(); 
});