मैंने एक div में छुपा() विकल्प जोड़ने का प्रयास किया जिसमें पहले से ही टॉगल() था। ताकि जब डिव का विस्तार किया जाए, तो टेक्स्ट काफी लंबा हो, टेक्स्ट के अंत में मैं एक एंकर रखना चाहता हूं, जब डिव को छिपाने के लिए क्लिक किया जाए। मैंने नीचे की तरह कोशिश की, लेकिन यह काम नहीं किया। कुछ समय के लिए साइट अच्छा काम कर रही है, लेकिन मैं इस सुविधा को जोड़ना चाहूंगा। एचटीएमएल है

$(document).ready(function() {
  $('h5').click(function(e) {
    $(this).parent().next().toggle();
    $(this).parent().next().next().next().toggle();
  });
  $('h5').click(function(e) {
    $(this).find('div.description').hide();
  });
});
.description {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title">
  <h1>14-nov-2019</h1>
  <h2>What is Urespray?</h2>
  <h5>click for more</h5>
</div>
<div class="description">
  <p>text text long text</p>
  <h5>Less</h5>
</div>

इसके साथ वाली साइट नीचे है, 'आर्टिकोल टेनिस' सेक्शन देखें, जहां लिखा है 'क्लिक पेंट्रु आर्टिकॉल' दबाएं। धन्यवाद http://agroline.eu/articole-tehnice.html#info-articole

0
mrs68tm 16 नवम्बर 2019, 12:30

2 जवाब

आप टॉगल के लिए नया तत्व बना सकते हैं जो विवरण तत्व की दृश्यता के आधार पर इसके टेक्स्ट को भी बदल देगा। यह समाधान तब भी काम करेगा जब आपके पास कई समान तत्व हों demo

$(".toggle").click(function() {
  const desc = $(this).prev('.description');
  desc.toggle();
  $(this).text(desc.is(':visible') ? 'Show less' : "Show more")
})
.description {
  display: none;
}

.toggle {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title">
  <h1>14-nov-2019</h1>
  <h2>What is Urespray?</h2>
</div>
<div class="description">
  <p>text text long text</p>
</div>
<h5 class="toggle">Show more</h5>
0
Nenad Vracar 16 नवम्बर 2019, 12:53

@Nenad Vracar का जवाब अच्छा है। आपके प्रश्न के अनुसार दूसरा तरीका, आप इसे आजमा सकते हैं

$(document).ready(function() {
      $('.taggle_description').click(function(e) {
        $(this).parent().next().toggle();
      });
      $('.hide_this_div').click(function(e) {
        $(this).parent().hide();
      });
    });

.description {
      display: none;
    }

<div class="title">
  <h1>14-nov-2019</h1>
  <h2>What is Urespray?</h2>
  <h5 class="taggle_description">click for more</h5>
</div>
<div class="description">
  <p>text text long text</p>
  <h5 class="hide_this_div">Less</h5>
</div>
0
Nur Hossen 16 नवम्बर 2019, 13:10