आप एक div के पाठ की पहली पंक्ति कैसे दिखाते हैं और क्लिक पर विस्तार करते हैं?

Question

मैं सिर्फ लिपटे पाठ के ब्लॉक की पहली पंक्ति दिखाना चाहता हूं, और उसके बाद पूरे ब्लॉक को क्लिक पर प्रकट करना चाहता हूं। साथ ही, मैं जानना चाहता हूं कि इसे दूसरे क्लिक पर कॉम्पैक्ट वन-लाइन संस्करण पर वापस कैसे टॉगल करना है।

क्या सीएसएस + जावास्क्रिप्ट के माध्यम से ऐसा करने का कोई आसान तरीका है? मैं jQuery का उपयोग करता हूँ।

Answer 1

मान लीजिए कि आप किसी भी जावास्क्रिप्ट लाइब्रेरी का उपयोग नहीं करना चाहते हैं (जो विषम है)।

देखें:http://jsfiddle.net/JUtcX/

HTML:

<div id="content"></div> 

सीएसएस:

#content { 
    border: 1px solid red; 
    height: 1em; 
    padding: 2px; /* adjust to taste */ 
    overflow: hidden  
} 

जावास्क्रिप्ट:

document.getElementById("content").onclick = function() { 
    this.style.height = 'auto'; 
} 

---

वैकल्पिक रूप से, अगर आप एक जावास्क्रिप्ट ढांचे जैसे jQuery उपयोग करना चाहते हैं, तो आप इसे चेतन कर सकते हैं।

देखें:http://jsfiddle.net/JUtcX/2/

$('#content').click(function() { 
    var reducedHeight = $(this).height(); 
    $(this).css('height', 'auto'); 
    var fullHeight = $(this).height(); 
    $(this).height(reducedHeight); 

    $(this).animate({height: fullHeight}, 500); 
}); 

Answer 2

<div id='a' onclick='toggletext'>first line<br /></div> 

function toggletext(){ 
    var html= document.getElementById('a').innerHTML; 
    if(html=='first line<br />'){ 
     html = 'first line<br />next lines<br />next lines<br />'; 
    }else{ 
     html = 'first line<br />'; 
    } 
    document.getElementById('a').innerHTML = html 
} 

इस अनुकूलित किया जा सकता है और आम libs

Answer 3

आप कुछ jQuery के साथ ऐसा कर सकता है से एक का उपयोग करने के लिए किया जा सकता है।

<div id="a"> 
    <span id="first">This is the first line (read more)</span> 
    <br /> 
    <span id="rest">This is the rest of the text</span> 
</div> 

स्क्रिप्ट

$('#rest').hide(); 

$('#first').click(function(){ 
    $('#rest').show();   
}); 

http://jsfiddle.net/jasongennaro/dC32A/

Answer 4

यह आसानी से सीएसएस + जावास्क्रिप्ट का उपयोग किया जाता है। आपको बस एक पंक्ति की ऊंचाई पर div की ऊंचाई सेट करने की आवश्यकता है, और सभी अतिप्रवाह छिपाएं। फिर जब उपयोगकर्ता div पर क्लिक करता है, तो div की पूरी सामग्री दिखाने के लिए एक अंधा-डाउन या अन्य समान प्रभाव करने के लिए एक अच्छा एनीमेशन हैंडलर का उपयोग करें।

यहाँ एक बहुत ही बुनियादी उदाहरण (एनिमेशन) है: http://jsfiddle.net/9Lw6T/

Answer 5

सीएसएस में लाइन के आकार के div के आकार को निर्धारित (महत्वपूर्ण: यदि आप विशेषता रिक्ति लाइन का उपयोग करने पर उचित गद्दी पाने के लिए आवश्यकता हो सकती है दूसरी पंक्ति के साथ नीचे)।

मुझे क्लिक करने के बारे में पता नहीं है, लेकिन आप होवर-शो प्रभाव प्राप्त करने के लिए शैली को बदलने के लिए सीएसएस में :hover का उपयोग कर सकते हैं (रीसेट लाइन स्पेस, रीसेट डिव साइज और उचित मानों पर ओवरफ्लो)।

या आप जावास्क्रिप्ट का उपयोग कर सकते हैं और क्लिक पर उस सीएसएस को बदल सकते हैं (jQuery के साथ आसान करने के लिए)।

Answer 6

एक जवाब के रूप में मेरी टिप्पणी पोस्ट:

एक और दृष्टिकोण हो सकता है, वर्ग height: 1em; overflow-y: hidden; को परिभाषित करने और फिर जोड़ने/जावास्क्रिप्ट के साथ क्लिक पर इसे हटाने।

या हो सकता है आप भी लपेटकर अपने एक <a> -tag साथ <div>, इसलिए कोई जावास्क्रिप्ट की जरूरत होगी द्वारा :active -pseudo श्रेणी में इसे संभाल सकता है। लेकिन फिर फोकस खोने पर div फिर से गिर जाएगी।

Answer 7

यह पर्याप्त होगा:

सभी लेकिन पहली पंक्ति छिपाने के लिए:

var theDiv = document.getElementById('theDiv'); 
theDiv.style.overflowY = 'visible'; 
theDiv.style.height = 'auto'; 

:

var theDiv = document.getElementById('theDiv'); 
theDiv.style.overflowY = 'hidden'; 
theDiv.style.height = '1em'; 

सभी पाठ दिखाने के लिए

या, यदि आप jQuery का उपयोग करने के लिए गए थे:

$('#theDiv').css({ height: '1em', overflowY: 'hidden' }); 

$('#theDiv').css({ height: 'auto', overflowY: 'visible' }); 

Answer 8

1em को div के छिपाने की स्थापना और उसके बाद exapnd यह onclick समाधान है।

इसे जांचें। मैंने किसी भी जेएस लाइब्रेरी का उपयोग नहीं किया है।

सीएसएस

.expandable{ 
    height:1.2em; 
    overflow:hidden; 
} 

एचटीएमएल

<div class="expandable" onclick="expand(this)">Your text here</div> 

जे एस

window.expand = function(el) { 
    el.style.height = "auto"; 
} 

यहाँ बेला

http://jsfiddle.net/RwM8S/1/

है

Answer 9

$(document).on('click', '.collapsible', function() { 
 
    $(this).toggleClass('collapsed'); 
 
});

p { 
 
    cursor: pointer; 
 
} 
 

 
.collapsed { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click. 
 
Is there an easy way to do this through css + javascript? I use jQuery.</p> 
 
<p class="collapsible">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click. 
 
Is there an easy way to do this through css + javascript? I use jQuery.</p> 
 
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click. 
 
Is there an easy way to do this through css + javascript? I use jQuery.</p>