The bottom line is:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe error corrupti distinctio non numquam, excepturi, doloribus repudiandae harum. Quisquam fugit, quibusdam beatae! Atque velit, pariatur deserunt suscipit ea nisi quis aspernatur autem ex cumque? Amet odio consectetur ea iure sint itaque, rem beatae quas? Aspernatur optio molestiae aperiam nostrum natus?</p> </div> <div id="text1" style="display:block; text-align:justify;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloremque nostrum magni, ullam nulla dolorum obcaecati excepturi in quis aut quia numquam ad ut laboriosam, aliquam minima, minus mollitia. Vero.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti ea obcaecati laudantium iste, aperiam, nemo quia, atque earum iure nesciunt praesentium fugiat cum error sunt voluptatibus omnis veritatis. Nesciunt accusantium, quibusdam illo. Laudantium itaque, quos dicta tempore debitis expedita iusto odio, adipisci atque ullam harum.</p> </div> <a href="javascript:look('text1');" id="a-text1" style="color:#9a0b0b;">скрыть</a> <script> function look(t) { p = document.getElementById(t); l = document.getElementById("a-" + t); if (p.style.display == "block") { l.innerHTML = "Читать еще"; p.style.display = "none"; } else { l.innerHTML = "скрыть"; p.style.display = "block"; } } </script>
there is a block of text and a small script, it is necessary to display all text without a button on screens larger than 768 (hide / read more), but on screens smaller than 768, some text to hide and display a button: read more

My hiding / showing work, but how can I tie it to the parameters described above?

    1 answer 1

    You should add this code:

     $(document).ready(function() { if($( window ).width() < 768) { $("#text1").hide(); $("#a-text1").html("показать еще"); $("#a-text1").show(); } else { $("#a-text1").hide(); $("#text1").show(); } });

    If you want to also hide when resizing the window:

     $(window).resize(function() { if($( window ).width() < 768) { $("#text1").hide(); $("#a-text1").html("показать еще"); $("#a-text1").show(); } else { $("#a-text1").hide(); $("#text1").show(); } });

    In general, you can use things like twitter bootstrap

    • everything is of course wonderful, but how to connect your code with mine is a conflict, and on large screens the text is hidden by default ... - sagan
    • @zorro, jsfiddle.net/sh1dh3v4 only your button does not work there. - Victor Yevlampyev
    • everything works ok, thank you so much - sagan