Ramin Mor
1 سال پیش توسط Ramin Mor مطرح شد
2 پاسخ

نمایش متن بیشتر با css-javacript

سلام وقت بخیر من یه متنی دارم به شکل زیر
ستون اول ستون دوم
متن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>

ثبت پرسش جدید
Javad Karimi
تخصص : فول استک
@javadkarimii 1 سال پیش مطرح شد
2

برای پیاده‌سازی این ویژگی، می‌توانید از CSS و JavaScript استفاده کنید. در اینجا یک مثال ساده آمده است:

  1. HTML:
    
    <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;
}
  1. JavaScript (با استفاده از jQuery):
    $(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 از سطرهای مخفی حذف (یا اضافه) می‌شود، و بنابراین سطرها نمایش داده می‌شوند (یا مخفی می‌شوند).

متن دکمه نیز بر اساس اینکه آیا همه‌ی سطرها نمایش داده شده‌اند یا خیر، به‌روز می‌شود.


Ramin Mor
تخصص : کارشناس آی تی (برنامه نویسی)
@ramin.mor47 1 سال پیش آپدیت شد
0

@javadkarimii
ممنون از راهنماییتون فقط یه ایراد داره اونم اینکه دیگه بستنش عمل نمیکنه!!! یعنی کلاس hidden حذف میشه ولی دوباره اعمال نمیشه!
یه تغییر کوچیک دادم کلاس سطر دوم رو حذف کردم و در جاوا اسکریپت اینو .hidden-row.hidden به این .hidden-row تغییر دادم.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام