Javascript show and hide text

How to hide text in html using javascript

Solution 3: Try this: Solution 1: You can use jQuery’s Toggle: http://api.jquery.com/toggle/ Because you’re new to programming, you might want to watch these video series about jQuery: http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/ Alternative solution without jQuery: You can also have a look at the related questions on the right of this page 🙂 Solution 2: You can use function from jQuery, a JavaScript framework: HTML: jQuery:

How to use JavaScript to hide a text area

It is the simple way of toggling the div using only one function,Ofcourse in JQuery there is only one thing you can do is ‘toggle’ the div

Replace visibility:hidden with display: none :

 and then show it by setting it to block:
this.form['txtReason'].style.display = 'block'; 

Additionally, you may want to look at jQuery which makes these kind of things extremely easy.

document.getElementById('welcomeDiv1').style.visibility = "hidden"; 

How do i hide and show the text at a particular screen width using, There’s no need for javascript here. Just use a @media rule to set display: block or display: none . You’re already doing that exact thing for

How to hide and show text in html using JavaScript

How to hide and show text in Html using JavaScript—English 69For Teluguhttps://www.youtube
Duration: 1:49

Читайте также:  Remove all css rules

Javascript — Show/Hide text

You can use jQuery’s Toggle: http://api.jquery.com/toggle/

Because you’re new to programming, you might want to watch these video series about jQuery: http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

Alternative solution without jQuery:

  show 

Hello world

You can also have a look at the related questions on the right of this page 🙂

You can use .toggle() function from jQuery, a JavaScript framework:

But if you hide the text, you can’t click on to redisplay it. So you need to find a clickable visual aid to redisplay the text. I let you think about it. 🙂

I’m not exactly sure that this would work, but you could try putting a blank picture over the text you want to hide and when you want to view the text, just remove the blank square. I’m not exactly 100% sure it would work though. I’m not as good at javascript as I am with C++.

Javascript Show/Hide text

May be you want something like this.

$(function () < $(".imgPreview").hide(); $(".unstyled li a").click(function (event) < var listItem = event.target.parentElement; var image = $(".imgPreview"); image.show(); image.find("img").attr("src", $(this).attr("href")); $(image.find("span"))[0].innerHTML="Price = $"+ ($( "li" ).index( listItem ) + 1); return false; >); $("body").click(function () < $(".imgPreview").hide(); >); >);
* body li .unstyled, .imgPreview, .showPrice .unstyled, .imgPreview img p .recycle-button

How can I show a hidden text by clicking on a button?, In the css file I included the command: #myDIV < display: none; >because otherwise the text would not be hidden at first. With this code the

Show and hide text on html using javascript

First your fiddle does not include jQuery so it fails.

Second you do not cancel the click event so the links fire.

or even better attach events with jQuery and use preventDefault()

$(".menu").on("click", "a[data-display]", function (e) < e.preventDefault(); var link = $(this); $(".tab-content").addClass("hide"); $("a.active").removeClass("active"); link.addClass("active"); $(".mostrar" + link.data("display")).removeClass("hide"); >);
 
Leer más Leer más Leer más Leer más
asd1
asd2
asd3
asd4

You need to include a jQuery librairy, or use native JavaScript.

And, as it’s use with a librairy, you need to load your code once the dom is ready:

// Shorthand for $( document ).ready() $(function() < console.log( "ready!" ); // your code ! >); 

You’ve not included jQuery library but that’s one of the problems. When you use jQuery it’s better not to use inline-js. Also your function could get simpler.

JavaScript hide elements, In JavaScript, we can hide the elements using the style.display or by using the style.visibility. The visibility property in JavaScript is also used to hide an

Источник

Показать/скрыть текст. Примеры на JS, CSS

Показать/скрыть текст

Давайте рассмотрим разные примеры того, как можно показать/скрыть текст по нажатию на кнопку. Обычно такая функция называется спойлер или аккордеон. Это когда весь текст или половина его скрыта от просмотра, и только при нажатии на кнопку, или определённый элемент, открывается весь текст.

Разнообразие реализации такой фишки, как показать/скрыть текст может быть огромное количество. Есть разный подход к технической части: на чистой JavaScript, jQuery, чистый CSS, HTML. Для WordPress можно найти специальные плагины или сделать раскрывающийся текст без плагина.

Показать скрыть текст JS

Первые примеры будут с использованием JS/jQuery. Всё представленное ниже можно «прикрутить» к любому сайту на любой платформе. Внешний вид, то есть дизайн, легко редактируется с помощью CSS.

Первый пример Посмотреть демо

  

.spoiler_wrap < position: relative; margin-bottom: 20px; font-size: 22px; background: #fff; border-radius: 5px; height: fit-content; >.spoiler_title < cursor: pointer; >.spoiler_title, .spoiler_content < padding: 30px 26px; >.spoiler_content < padding-top: 0; padding-bottom: 10px; transition: 0.15s ease-out; height: auto; max-height: 0px; overflow: hidden; margin-top: -10px; opacity: 0; font-size: 14px; color: #444; >.spoiler_content p < font-size: 16px; margin: 20px 0; color: #333; line-height: 1.4; >.spoiler_content.open < margin-top: 0; max-height: 100%; opacity: 1; >.spoiler_title .spoiler_arrow < display: inline-block; margin-left: 15px; font-size: 20px; transition: all .1s; vertical-align: middle; >.spoiler_title .spoiler_arrow svg < fill: red; width: 13px; >.spoiler_title .spoiler_arrow.open

Второй пример Посмотреть демо

  

.morecontent span < display: none; >.morelink

Третий пример Посмотреть демо

  
.spoiler_wrap < border-bottom: 1px solid #999999; margin-bottom: 15px; >.spoiler_wrap.active .spoiler_content < max-height: 500px !important; padding-bottom: 25px; transition: max-height 0.5s ease, padding-bottom 0.3s ease; >.spoiler_wrap.active .spoiler_title < color: #808080; transition: color 0.3s ease; >.spoiler_content < color: #090909; font-family: serif; font-size: 16px; line-height: 24px; max-height: 0; overflow: hidden; transition: max-height 0.5s ease, padding-bottom 0.3s ease; >.spoiler_content p < margin-bottom: 25px; >.plus-minus-toggle < cursor: pointer; height: 21px; position: absolute; width: 21px; left: -40px; top: 50%; z-index: 2; >.plus-minus-toggle:before, .plus-minus-toggle:after < background: #000; content: ''; height: 4px; left: 0; position: absolute; top: 0; width: 21px; transition: transform 500ms ease; >.plus-minus-toggle:after < transform-origin: center; >.plus-minus-toggle.collapsed:after < transform: rotate(90deg); >.plus-minus-toggle.collapsed:before < transform: rotate(180deg); >.spoiler_title < color: #090909; font-family: sans-serif; font-size: 20px; font-weight: 800; text-transform: uppercase; position: relative; cursor: pointer; padding: 20px 0; transition: color 0.5s ease; >@media screen and (max-width: 767px) < .spoiler_title < font-size: 18px; >>

Четвертый пример Посмотреть демо

  

.spoiler_wrap < margin-bottom: 40px; >.spoiler_title_wrap < display: block; padding: 0px; >.spoiler_title < margin-bottom: 20px; font-size: 22px; font-weight: 600; color: #000; cursor: pointer; display: table; transition: all .3s ease-in-out; position: relative; >.spoiler_title:hover, .expanded .spoiler_title < opacity: 0.7; >.spoiler_content < font-size: 16px; border-radius: 5px; line-height: 26px; display: none; margin-bottom: 30px; padding: 30px; background: #333; position: relative; >.spoiler_content p < color: #999; margin-bottom: 25px; >.spoiler_content p:last-child < margin-bottom: 0px; >.arrow-t < transform: rotate(-45deg); display: block; position: absolute; top: 7px; right: -33px; width: 10px; height: 10px; background: transparent; border-left: 3px solid #000; border-bottom: 3px solid #000; transition: all .3s ease-in-out; >.arrow-b

Пятый пример Посмотреть демо

  

.text_hide_wrap < max-width: 700px; >.item_text < width: 100%; padding: 20px; >.item_text p < margin-bottom: 20px; >.io_item < width: 100%; padding-bottom: 20px; >.io_button_wrap < text-align: center; margin-top: 10px; >.io_button < display: inline-block; border: 1px solid #f00; width: auto; padding: 0 20px; line-height: 32px; vertical-align: top; text-transform: uppercase; color: #f00 !important; font-size: 10pt; border-radius: 22px; cursor: pointer; >a.io_button:hover < text-decoration: none; >.io_item .btn_close < display: none; >.io_item .btn_open < display: inline-block; >.io_item.open .btn_close < display: inline-block; >.io_item.open .btn_open < display: none; >.io_trans < width: inherit; position: absolute; height: 80px; bottom: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); transition: 1s; >.io_item.open .io_trans < height: 0; transition: 1s; >.io_item_wrap < position: relative; overflow: hidden; max-height: 100px; width: inherit; transition: max-height 0.5; >.io_item.open .io_item_wrap

Показать скрыть текст CSS

Подобное скрытие текста можно реализовать одними средствами CSS и HTML. И это не значит какой-то недостаток. В том плане, что будет хуже, чем с помощью JS/jQuery. Да и в целом многое зависит от поставленной задачи. И помните, всегда можно отредактировать стили под свой дизайн сайта.

Первый пример Посмотреть демо

 
текст

CSS

.spoiler_content < opacity: 1; transition: opacity 0.4s ease-in-out; >.spoiler_content p < text-align: left; margin-bottom: 5px; >.read-more-state < display: none; >.text_hide < opacity: 0; max-height: 0; font-size: 0; transition: opacity 0.4s ease-in-out; >.read-more-state:checked~.spoiler_content .text_hide < opacity: 1; font-size: inherit; max-height: 999em; >.read-more-state:checked~.spoiler_content p < margin-bottom: 20px; >.read-more-state~.read-more-trigger:before < content: 'Показать всё'; >.read-more-state:checked~.read-more-trigger:before < content: 'Скрыть текст'; >.read-more-trigger

Второй пример Посмотреть демо

.spoiler_wrap < position: relative; min-height: 30px; margin-bottom: 15px; >.spoiler_title < width: 100%; position: absolute; top: 0; left: 0; margin: 0; height: 30px; z-index: 1; font-weight: 600; font-size: 18px; >.toggle:checked~.spoiler_title, .spoiler_title:hover < color: #EA2816; >.icon < height: 18px; position: absolute; width: 18px; right: 0; top: 11px; z-index: 2; >.icon:before, .icon:after < background: #333; content: ''; height: 4px; right: 0; position: absolute; top: 0; width: 18px; transition: transform 500ms ease; >.toggle:checked~.icon:before, .toggle:checked~.icon:after < background: #EA2816; >.toggle:not(:checked)~.icon:before < transform: rotate(180deg); >.toggle:not(:checked)~.icon:after < transform: rotate(90deg); >.toggle < width: 100%; height: 40px; margin: 0; opacity: 0; cursor: pointer; position: absolute; top: 0; z-index: 3; >.border < height: 40px; border-bottom: 1px solid #333; >.toggle:checked~.border < border-bottom: 1px solid #EA2816; >.spoiler_content < padding: 15px 0 0 0; height: 0; overflow: hidden; z-index: -1; position: relative; opacity: 0; transition: .4s ease; >.toggle:checked~.spoiler_content < height: auto; opacity: 1; z-index: 2; >.spoiler_content>p

HTML-тег details: показать скрыть текст

Есть совсем простое решение, чтобы создать кнопку, при нажатии на которую открывается текст. Для этого существуют специальные теги в HTML 5, такие как , . По сути, их можно использовать даже без стилей CSS. Но чтоб всё сделать красиво, конечно, желательно применить каскадную таблицу.

 
Что такое спойлер?

текст

Открытый спойлер

текст

details < min-height: 5px; padding: 25px 70px 25px 25px; margin: 0 auto; position: relative; font-size: 22px; border: 1px solid #333; border-radius: 10px; box-sizing: border-box; transition: all .3s; >details+details < margin-top: 20px; >details[open] < min-height: 50px; >details[open] summary ~ * < animation: anspl .3s cubic-bezier(.52,.41,.75,.74); >@keyframes anspl < 0% 100% > details p < color: #444; font-weight: 400; margin: 15px 0; >details p:last-child < margin-bottom: 0px; >summary < display: flex; align-items: center; font-weight: 500; cursor: pointer; >summary:focus < outline: none; >summary::-webkit-details-marker < display: none >summary::before < content: '+'; padding-right: 0.5em; >details[open]>summary::before

Читайте также:

Источник

Показать/скрыть текст. Примеры на JS, CSS

Показать/скрыть текст

Давайте рассмотрим разные примеры того, как можно показать/скрыть текст по нажатию на кнопку. Обычно такая функция называется спойлер или аккордеон. Это когда весь текст или половина его скрыта от просмотра, и только при нажатии на кнопку, или определённый элемент, открывается весь текст.

Разнообразие реализации такой фишки, как показать/скрыть текст может быть огромное количество. Есть разный подход к технической части: на чистой JavaScript, jQuery, чистый CSS, HTML. Для WordPress можно найти специальные плагины или сделать раскрывающийся текст без плагина.

Показать скрыть текст JS

Первые примеры будут с использованием JS/jQuery. Всё представленное ниже можно «прикрутить» к любому сайту на любой платформе. Внешний вид, то есть дизайн, легко редактируется с помощью CSS.

Первый пример Посмотреть демо

  

.spoiler_wrap < position: relative; margin-bottom: 20px; font-size: 22px; background: #fff; border-radius: 5px; height: fit-content; >.spoiler_title < cursor: pointer; >.spoiler_title, .spoiler_content < padding: 30px 26px; >.spoiler_content < padding-top: 0; padding-bottom: 10px; transition: 0.15s ease-out; height: auto; max-height: 0px; overflow: hidden; margin-top: -10px; opacity: 0; font-size: 14px; color: #444; >.spoiler_content p < font-size: 16px; margin: 20px 0; color: #333; line-height: 1.4; >.spoiler_content.open < margin-top: 0; max-height: 100%; opacity: 1; >.spoiler_title .spoiler_arrow < display: inline-block; margin-left: 15px; font-size: 20px; transition: all .1s; vertical-align: middle; >.spoiler_title .spoiler_arrow svg < fill: red; width: 13px; >.spoiler_title .spoiler_arrow.open

Второй пример Посмотреть демо

  

.morecontent span < display: none; >.morelink

Третий пример Посмотреть демо

  
.spoiler_wrap < border-bottom: 1px solid #999999; margin-bottom: 15px; >.spoiler_wrap.active .spoiler_content < max-height: 500px !important; padding-bottom: 25px; transition: max-height 0.5s ease, padding-bottom 0.3s ease; >.spoiler_wrap.active .spoiler_title < color: #808080; transition: color 0.3s ease; >.spoiler_content < color: #090909; font-family: serif; font-size: 16px; line-height: 24px; max-height: 0; overflow: hidden; transition: max-height 0.5s ease, padding-bottom 0.3s ease; >.spoiler_content p < margin-bottom: 25px; >.plus-minus-toggle < cursor: pointer; height: 21px; position: absolute; width: 21px; left: -40px; top: 50%; z-index: 2; >.plus-minus-toggle:before, .plus-minus-toggle:after < background: #000; content: ''; height: 4px; left: 0; position: absolute; top: 0; width: 21px; transition: transform 500ms ease; >.plus-minus-toggle:after < transform-origin: center; >.plus-minus-toggle.collapsed:after < transform: rotate(90deg); >.plus-minus-toggle.collapsed:before < transform: rotate(180deg); >.spoiler_title < color: #090909; font-family: sans-serif; font-size: 20px; font-weight: 800; text-transform: uppercase; position: relative; cursor: pointer; padding: 20px 0; transition: color 0.5s ease; >@media screen and (max-width: 767px) < .spoiler_title < font-size: 18px; >>

Четвертый пример Посмотреть демо

  

.spoiler_wrap < margin-bottom: 40px; >.spoiler_title_wrap < display: block; padding: 0px; >.spoiler_title < margin-bottom: 20px; font-size: 22px; font-weight: 600; color: #000; cursor: pointer; display: table; transition: all .3s ease-in-out; position: relative; >.spoiler_title:hover, .expanded .spoiler_title < opacity: 0.7; >.spoiler_content < font-size: 16px; border-radius: 5px; line-height: 26px; display: none; margin-bottom: 30px; padding: 30px; background: #333; position: relative; >.spoiler_content p < color: #999; margin-bottom: 25px; >.spoiler_content p:last-child < margin-bottom: 0px; >.arrow-t < transform: rotate(-45deg); display: block; position: absolute; top: 7px; right: -33px; width: 10px; height: 10px; background: transparent; border-left: 3px solid #000; border-bottom: 3px solid #000; transition: all .3s ease-in-out; >.arrow-b

Пятый пример Посмотреть демо

  

.text_hide_wrap < max-width: 700px; >.item_text < width: 100%; padding: 20px; >.item_text p < margin-bottom: 20px; >.io_item < width: 100%; padding-bottom: 20px; >.io_button_wrap < text-align: center; margin-top: 10px; >.io_button < display: inline-block; border: 1px solid #f00; width: auto; padding: 0 20px; line-height: 32px; vertical-align: top; text-transform: uppercase; color: #f00 !important; font-size: 10pt; border-radius: 22px; cursor: pointer; >a.io_button:hover < text-decoration: none; >.io_item .btn_close < display: none; >.io_item .btn_open < display: inline-block; >.io_item.open .btn_close < display: inline-block; >.io_item.open .btn_open < display: none; >.io_trans < width: inherit; position: absolute; height: 80px; bottom: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); transition: 1s; >.io_item.open .io_trans < height: 0; transition: 1s; >.io_item_wrap < position: relative; overflow: hidden; max-height: 100px; width: inherit; transition: max-height 0.5; >.io_item.open .io_item_wrap

Показать скрыть текст CSS

Подобное скрытие текста можно реализовать одними средствами CSS и HTML. И это не значит какой-то недостаток. В том плане, что будет хуже, чем с помощью JS/jQuery. Да и в целом многое зависит от поставленной задачи. И помните, всегда можно отредактировать стили под свой дизайн сайта.

Первый пример Посмотреть демо

 
текст

CSS

.spoiler_content < opacity: 1; transition: opacity 0.4s ease-in-out; >.spoiler_content p < text-align: left; margin-bottom: 5px; >.read-more-state < display: none; >.text_hide < opacity: 0; max-height: 0; font-size: 0; transition: opacity 0.4s ease-in-out; >.read-more-state:checked~.spoiler_content .text_hide < opacity: 1; font-size: inherit; max-height: 999em; >.read-more-state:checked~.spoiler_content p < margin-bottom: 20px; >.read-more-state~.read-more-trigger:before < content: 'Показать всё'; >.read-more-state:checked~.read-more-trigger:before < content: 'Скрыть текст'; >.read-more-trigger

Второй пример Посмотреть демо

.spoiler_wrap < position: relative; min-height: 30px; margin-bottom: 15px; >.spoiler_title < width: 100%; position: absolute; top: 0; left: 0; margin: 0; height: 30px; z-index: 1; font-weight: 600; font-size: 18px; >.toggle:checked~.spoiler_title, .spoiler_title:hover < color: #EA2816; >.icon < height: 18px; position: absolute; width: 18px; right: 0; top: 11px; z-index: 2; >.icon:before, .icon:after < background: #333; content: ''; height: 4px; right: 0; position: absolute; top: 0; width: 18px; transition: transform 500ms ease; >.toggle:checked~.icon:before, .toggle:checked~.icon:after < background: #EA2816; >.toggle:not(:checked)~.icon:before < transform: rotate(180deg); >.toggle:not(:checked)~.icon:after < transform: rotate(90deg); >.toggle < width: 100%; height: 40px; margin: 0; opacity: 0; cursor: pointer; position: absolute; top: 0; z-index: 3; >.border < height: 40px; border-bottom: 1px solid #333; >.toggle:checked~.border < border-bottom: 1px solid #EA2816; >.spoiler_content < padding: 15px 0 0 0; height: 0; overflow: hidden; z-index: -1; position: relative; opacity: 0; transition: .4s ease; >.toggle:checked~.spoiler_content < height: auto; opacity: 1; z-index: 2; >.spoiler_content>p

HTML-тег details: показать скрыть текст

Есть совсем простое решение, чтобы создать кнопку, при нажатии на которую открывается текст. Для этого существуют специальные теги в HTML 5, такие как , . По сути, их можно использовать даже без стилей CSS. Но чтоб всё сделать красиво, конечно, желательно применить каскадную таблицу.

 
Что такое спойлер?

текст

Открытый спойлер

текст

details < min-height: 5px; padding: 25px 70px 25px 25px; margin: 0 auto; position: relative; font-size: 22px; border: 1px solid #333; border-radius: 10px; box-sizing: border-box; transition: all .3s; >details+details < margin-top: 20px; >details[open] < min-height: 50px; >details[open] summary ~ * < animation: anspl .3s cubic-bezier(.52,.41,.75,.74); >@keyframes anspl < 0% 100% > details p < color: #444; font-weight: 400; margin: 15px 0; >details p:last-child < margin-bottom: 0px; >summary < display: flex; align-items: center; font-weight: 500; cursor: pointer; >summary:focus < outline: none; >summary::-webkit-details-marker < display: none >summary::before < content: '+'; padding-right: 0.5em; >details[open]>summary::before

Читайте также:

Источник

Оцените статью