سلام وقت بخیر من یه متنی دارم به شکل زیر
ستون اول ستون دوم
متن1 متن11
متن2 متن22
متن3 متن33
متن4 متن44
من میخوام با استفاده از css و javascript دو سطر اول رو نشون بدم بعد با کلیک رو یه دکمه دیگه بقیه متن ها نمایش داده بشه یا دوباره پنهان بشه.
اومدم کد زیر رو استفاده کردم ولی موقع باز شدن ستنو های دوم میره زیر ستون های اول. البته وقتی کد رو اعمال نمیکنم درست نشون میده.
<style>
#text{
display:none;
}
.btn-container{
margin: auto;
height:44px;
width:166.23px;
</style>
$("#toggle").click(function() {
var elem = $("#toggle").text();
if (elem == "نمایش بیشتر") {
//Stuff to do when btn is in the read more state
$("#toggle").text("نمایش کمتر");
$("#text").slideDown();
} else {
//Stuff to do when btn is in the read less state
$("#toggle").text("نمایش بیشتر");
$("#text").slideUp();
}
});
<div class="row" >
<div class="text-center">
<div class="row col-6">
<b>ستون اول:</b>
<span>متن1</span>
</div>
<div class="row col-6">
<b> ستون دوم:</b>
<span>متن11</span>
</div>
</div>
<div id="text" class="text-center">
<div class="row col-6">
<span>متن2</span>
<span>متن3</span>
<span>متن4</span>
</div>
<div class="row col-6">
<span>متن22</span>
<span>متن33</span>
<span>متن44</span>
</div>
</div>
<div class="btn-container">
<button id="toggle">نمایش بیشتر</button>
</div>
</div>
برای پیادهسازی این ویژگی، میتوانید از CSS و JavaScript استفاده کنید. در اینجا یک مثال ساده آمده است:
<table id="myTable">
<tr>
<td>ستون اول</td>
<td>ستون دوم</td>
</tr>
<tr class="hidden-row">
<td>متن1</td>
<td>متن11</td>
</tr>
<tr class="hidden-row">
<td>متن2</td>
<td>متن22</td>
</tr>
<tr class="hidden-row hidden">
<td>متن3</td>
<td>متن33</td>
</tr>
<tr class="hidden-row hidden">
<td>متن4</td>
<td>متن44</td>
</tr>
</table>
<button id="toggleBtn">نمایش بیشتر</button>
2. **CSS:**
```css
.hidden {
display: none;
}
$(document).ready(function() {
$("#toggleBtn").click(function() {
$(".hidden-row.hidden").toggleClass("hidden");
if ($(".hidden-row.hidden").length) {
$("#toggleBtn").text("نمایش بیشتر");
} else {
$("#toggleBtn").text("نمایش کمتر");
}
});
});
در این مثال، دو سطر اول جدول با کلاس hidden-row
و بدون کلاس hidden
مشخص شدهاند، بنابراین از ابتدا نمایش داده میشوند. دو سطر بعدی با هر دو کلاس hidden-row
و hidden
مشخص شدهاند، بنابراین از ابتدا مخفی هستند.
وقتی دکمهی "نمایش بیشتر" کلیک میشود، کلاس hidden
از سطرهای مخفی حذف (یا اضافه) میشود، و بنابراین سطرها نمایش داده میشوند (یا مخفی میشوند).
متن دکمه نیز بر اساس اینکه آیا همهی سطرها نمایش داده شدهاند یا خیر، بهروز میشود.
@javadkarimii
ممنون از راهنماییتون فقط یه ایراد داره اونم اینکه دیگه بستنش عمل نمیکنه!!! یعنی کلاس hidden حذف میشه ولی دوباره اعمال نمیشه!
یه تغییر کوچیک دادم کلاس سطر دوم رو حذف کردم و در جاوا اسکریپت اینو .hidden-row.hidden به این .hidden-row تغییر دادم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟