और पढ़ें/कम jQuery accordion

Question

मैं एक jQuery एग्रीजन की तलाश कर रहा हूं जो किसी भी भाग्य के साथ avg website पर पाया जा सकता है, इसलिए मुझे उम्मीद है कि यहां कोई मुझे सही दिशा में इंगित कर सकता है। स्रोत कोड या उदाहरण के लिए।

मेरे पास पहले से ही एग्रीजन काम कर रहा है लेकिन यह और अधिक/करीब की सुविधा है जो गायब है और मैं इसका उपयोग करना चाहता हूं।

Answer 1

Jquery UI Accordion जो आप चाहते हैं वह करता है। विशेष रूप से ढहने योग्य सुविधा को देखें।

कार्य उदाहरण: Fiddle

एचटीएमएल

<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 के यूआई (अकॉर्डियन)

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

तो बस इसे अपने स्वाद के लिए शैली।

सीएसएस

#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; } 

का उपयोग jQuery के यूआई अच्छा हो सकता है क्योंकि वे पहले से ही ऊपर/नीचे कुंजियों के लिए समर्थन तरह बातें जोड़ दिया है और आप आसानी से एनीमेशन प्रकार बदल सकते हैं। यदि आप चाहें तो हेडर के टेक्स्ट को सक्रिय और बदलने के लिए ईवेंट को भी कैप्चर कर सकते हैं।

Answer 2

Fiddle

एचटीएमएल

<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"); 
}); 

अद्यतन: jQuery थोड़ा छोटा।

Answer 3

Jquery UI बहुत अच्छा है, लेकिन यह केवल एक छोटे से accordion के लिए बहुत सी अतिरिक्त चीजें हैं। यदि आप सभी सुविधाओं का उपयोग करने जा रहे हैं, तो इसके लिए जाएं।

आप jQuery विधियों show(), छुपाएं() या टॉगल() का उपयोग भी कर सकते हैं। उन लोगों के बारे में जानने के लिए लिंक का पालन करें, मैं उन्हें यहां समझाऊंगा नहीं।

उन सभी के साथ समस्या यह है कि वे सभी पाठ दिखाते हैं या छिपाते हैं, क्योंकि यहां कुछ अन्य उत्तरों का प्रदर्शन होता है। यदि आप वास्तविक टेक्स्ट की एक पंक्ति या दो (या दस) दिखाना चाहते हैं, तो बटन/लिंक पर क्लिक करके इसे सभी प्रदर्शित करें, आपको डिब्बाबंद तरीकों से थोड़ा अधिक चाहिए। यदि आप बस ऐसा करने के लिए एक छोटी सी स्क्रिप्ट चाहते हैं, या सिर्फ यह समझना चाहते हैं कि यह कैसे किया गया, तो यह मेरी छोटी प्लगइन है। मेरी स्क्रिप्ट शो()/hide() के समान accordion के खुले और समापन को एनिमेट करती है, लेकिन बंद स्थिति में टेक्स्ट की पूर्व परिभाषित मात्रा दिखाएगी।

Fiddle

आशा इस मदद करता है

एचटीएमएल

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

सीएसएस

.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(); 
});