Семантический интерфейс | Раскрыть
Semantic UI - это фреймворк с открытым исходным кодом, который использует CSS и jQuery для создания отличных пользовательских интерфейсов. Это то же самое, что и бутстрап для использования, и в нем есть множество различных элементов, которые можно использовать, чтобы ваш сайт выглядел более потрясающе. Он использует класс для добавления CSS к элементам.
Показывать показывать контент вместо предыдущего при активации или наведении курсора.
Example 1: Fading Reveal.
<!DOCTYPE html><html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> <script src= </script></head> <body> <div class="ui container"> <h2>Reveal Fade</h2> <div class="ui small fade reveal image"> <img class="visible content" src= <img class="hidden content" src= </div> </div></body> </html> |
Здесь, в классе видимого контента, мы должны добавить контент, который мы хотим отображать по умолчанию, а в скрытом контенте мы хотим поместить тот контент, который мы хотим раскрыть.
Выход: 
Пример 2: Показать ход.
Вы можете добавить класс вверх, вниз и вправо, чтобы двигаться вверх, вниз и в правильном направлении. Например, для класса вверх class = 'ui move up to show'.
Выход: 
Example 3: Rotate Reveal
<!DOCTYPE html><html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> <script src= </script></head> <body> <div class="ui container"> <h2>Reveal Rotate</h2> <div class="ui small circular rotate reveal image"> <img src= class="visible content"> <img src= class="hidden content"> </div> </div></body> </html> |
Измените класс на «UI, маленький круговой поворот влево, открывающее изображение», чтобы повернуть его влево.
Выход: 
Вы можете добавить мгновенный класс к любому открытию, чтобы раскрыть его без промедления.
Примечание . Соотношение сторон скрытых и видимых изображений должно быть одинаковым.