Текст под спойлер "Подробнее"

[Astronaut]

Увидел вот такой модуль на Liveopencart и подумал, что платить даже 362 рубля за такое это грех)

Вот простой код для оптимизации текста и вставки спойлера "Подробнее" и т.п.

1 вариант (кнопка показать еще опускается вниз вместе с текстом)

<div id="spoiler" style="display:none">

///Здесь HTML код / текст///

</div>
<button title="Показать еще" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" style="display: inline-block;
padding: 4px 12px;
border-radius: 25px;
color: #55a9d4;
font-size: 16px;
border: 1px solid #55a9d4;
background: #3f4e5d;">Показать еще</button>

2 вариант (кнопка показать еще остается наверху )

<style>
.del { display: none; }
.del:not(:checked) + label + * { display: none; } /* фактически нужна только одна строка */

/* вид CSS кнопки */
.del:not(:checked) + label,
.del:checked + label {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 2px;
  color: #fff;
  background: #4e6473;
  cursor: pointer;
}
.del:checked + label {
  background: #e36443;
}
</style>

<input type="checkbox" id="raz" class="del" /><label for="raz" class="del">Показать еще</label><div>

///Здесь HTML код / текст///


</div>

 

[fortuner]

С точки зрения SEO не очень гуд скрывать текст через display:none, это сильно ухудшает индексацию.
Вот вам мой сниппет:

    let category_description = document.querySelector('.category-description');
    if (!!category_description && category_description.scrollHeight > 200) {
        let expand_btn = document.createElement('button');
        expand_btn.classList.add('expand_button');
        expand_btn.innerText = "Развернуть"
        expand_btn.addEventListener('click', function() {
            let h = category_description.style.maxHeight;
            if ( h == '') {
                category_description.style.maxHeight = category_description.scrollHeight+'px';
                expand_btn.innerText = "Развернуть";
            } else {
                if(h !== '200px') {
                    category_description.style.maxHeight = '200px';
                    expand_btn.innerText = "Развернуть";
                } else {
                    category_description.style.maxHeight = category_description.scrollHeight+'px';
                    expand_btn.innerText = "Свернуть";
                }
            }          
        });
        category_description.insertAdjacentElement('afterend', expand_btn);
    }

А к блоку .category-description добавить стили:

.category-description {
    max-height: 200px;
    overflow-y: scroll;
}

 

[Astronaut]

Ну если display:none плохо, тогда можно и без него)

<div class="spoiler">
<details>
<summary>Показать/Cкрыть</summary>
<br>


///HTML/Текст///


</details>
</div>

<style>
.spoiler details + details {
  margin-top: 1em;
}
.spoiler summary {
  font-weight: 700;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 25px;
  color: #55a9d4;
  font-size: 16px;
  border: 1px solid #55a9d4;
  background: #3f4e5d;
  max-width: 180px;
  text-align:center;

}

.spoiler summary:hover {
  color:#368ab5;
}
</style>

 

[fortuner]

Тег details воспринимается гуглом как display:none

 

[Astronaut]

Тег details воспринимается гуглом как display:none

дануна))
пошел почитаю

 

[Astronaut]

Тег details воспринимается гуглом как display:none

А есть какой нибудь свежий пруф ?
перечитал весь яндекс ничего про тег details нет
наоборот в одной статье он вроде полезный )
SEO-Блог SiteClinic

И здесь тоже он в числе полезных для структурирования страницыи обработкой роботами
семантические теги HTML5

 

[fortuner]

А есть какой нибудь свежий пруф ?
перечитал весь яндекс ничего про тег details нет
наоборот в одной статье он вроде полезный )
SEO-Блог SiteClinic

И здесь тоже он в числе полезных для структурирования страницыи обработкой роботами
семантические теги HTML5

Я про гугл, яндекс мне не интересен

Вот, например:

Google Treats Details HTML5 Tag Like Toggleable Display:None

With all the confusion around expandable or hidden content on mobile especially with the mobile first index coming eventually, it is no wonder we see so many questions around it. In short, content within tabs or expandable when the mobile-first index comes out will be perfectly okay and treated...

www.seroundtable.com

В целом мне незачем препираться, написал как сделать лучше на мой взгляд. Удачи

 

[Astronaut]

Я про гугл, яндекс мне не интересен

Вот, например:

Google Treats Details HTML5 Tag Like Toggleable Display:None

With all the confusion around expandable or hidden content on mobile especially with the mobile first index coming eventually, it is no wonder we see so many questions around it. In short, content within tabs or expandable when the mobile-first index comes out will be perfectly okay and treated...

www.seroundtable.com

В целом мне незачем препираться, написал как сделать лучше на мой взгляд. Удачи

ну там 2017 год. старая статья
в более свежих информация другая

зы а я в России живу, мне как раз на гугл пофиг )