Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
Fatmarmelad
4 / 4 / 0
Регистрация: 20.02.2016
Сообщений: 913
1

Эффект гармошки в CSS. Как полностью закрыть гармошку?

03.02.2019, 21:40. Просмотров 918. Ответов 1
Метки нет (Все метки)

Доброго дня!
Нашёл рецепт гармошки (ниже). И, как вижу, одна из секций получается всегда открытой. Можно ли что-то добавить в данный код из CSS, без Bootstrap и пр., чтобы можно было полностью закрывать гармошку?

CSS
1
2
3
4
#maincont section a{text-align: center;text-decoration: none; color:black;}
#maincont section a:hover{text-align: center;text-decoration: underline; color:red;}
#maincont section p{display: none;}
#maincont section:target  p{display: block;}


HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
<main id="maincont">
    <section id="item1">
        
<a href="#item1"><h1>Item 1</h1></a>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
    </section>
    <section id="item2">
<a href="#item2"><h1>Item 2</h1></a>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
    </section>
<section id="item3">
    <a href="#item3"><h1>Item 3</h1></a>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
[CSS][/CSS]</main>
</body>
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.02.2019, 21:40
Ответы с готовыми решениями:

Как закрыть полностью сайт?
Здравствуйте. Подскажите как полностью закрыть сайт от незарегистрированных пользователей. То есть...

Как полностью закрыть cppwebbrowser?
После работы cppwebbrowser'a программа ест примерно 80-100 озу. Как я могу закрыть браузер, не...

Как полностью закрыть приложение?
в программе есть две формы, одну из которых я скрываю(Hide()). если запускаю с .exe, то при...

Как полностью закрыть приложение?
Как полностью закрыть приложение? У меня он закрывается, но продолжает висеть в процессах и при...

1
tnfsk
204 / 67 / 41
Регистрация: 15.09.2018
Сообщений: 197
04.02.2019, 16:34 2
jsfiddle

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<div class="container">
 
<div class="accordionCss">
 
<div class="accordionCss_section">        
<a href="#ac_01" class="accordionCss_title">Начало пути</a>
<div id="ac_01" class="accordionCss_content">
<p>В апреле месяце 1811 года, командуя императорским военным шлюпом "Дианой",
находившимся тогда в Камчатке, получил я от морского министра предписание,
коим, по высочайшей воле, повелевалось мне описать точнейшим образом южные
Курильские острова, Шантарские острова и Татарский берег, от широты N до Охотска.</p>
<p>В повелении господина министра было упомянуто о двух бумагах, содержавших
в себе подробное описание возложенного на меня поручения и посланных с оным
повелением в одно время из Адмиралтейств-коллегий и из Адмиралтейского департамента,
но сих бумаг я не получил, да и получить их в Камчатку прежде будущей осени,
зная здешние почтовые учреждения, никакой возможности не предвидел; для получения
нынешним летом упоминаемых бумаг оставалось мне одно средство: идти со шлюпом в Охотск.</p> 
</div>
<a href="#ghost" class="accordionCss_ghost"></a>  
</div>
<!-- -->
<div class="accordionCss_section">        
<a href="#ac_02" class="accordionCss_title">Поручения</a>
<div id="ac_02" class="accordionCss_content">
<p>В повелении господина министра было упомянуто о двух бумагах,
содержавших в себе подробное описание возложенного на меня поручения
и посланных с оным повелением в одно время из Адмиралтейств-коллегий
и из Адмиралтейского департамента, но сих бумаг я не получил, да и получить
их в Камчатку прежде будущей осени, зная здешние почтовые учреждения,
никакой возможности не предвидел; для получения нынешним летом упоминаемых бумаг
оставалось мне одно средство: идти со шлюпом в Охотск.</p>
<p>Предмет сей, без всякого сомнения, был весьма важен, хотя, по предписанию
морского министра, мне вполне известна была воля его императорского величества:
я знал, какие места должен был описывать и что государю императору угодно,
чтобы оным сделано было точнейшее описание.</p>
</div>
<a href="#ghost" class="accordionCss_ghost"></a>  
</div>
<!-- -->
<div class="accordionCss_section">        
<a href="#ac_03" class="accordionCss_title">Решение</a>
<div id="ac_03" class="accordionCss_content">
<p>Но каким образом надобно было произвести в действо высочайшую волю,
в том я должен был руководствоваться наставлениями Государственной Адмиралтейств-коллегий;
равным образом и инструкция Государственного Адмиралтейского
департамента хотя служила только дополнением к той, которую я уже имел,
однако же могла содержать в себе предписания и наставления, без коих при
описи я мог сделать, по неопытности и по недостатку столь обширных сведений
о здешнем крае, какие имеет департамент, немаловажные упущения.</p>
<p>Я очень жалел, что не получил прежде упомянутых бумаг вместе с повелением
министерским, и чувствовал все неудобства, от неприсылки оных произойти могущие;
но, с другой стороны, ясно предвидел потерю времени,
убыток для казны и невозможность сделать что-либо порядочное,
стоящее издержек и трудов, словом сказать, совершенное упущение
целого лета, без всякой значащей пользы по предмету предпринятой
экспедиции, если бы я пошел сначала в Охотск.</p>
</div>
<a href="#" class="accordionCss_ghost"></a>  
</div>
 
 
</div>
    
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
* {
  box-sizing: border-box;
}
 
/* 360-28-76 */
 
html{
  font-family: Georgia;
  line-height: 1.5;
  font-size: 15px;
}
 
.container{
  max-width: 900px;
  margin: 0 auto;
}
 
.accordionCss_section{
  position: relative;
  margin-bottom: 10px;
}
 
.accordionCss_title{
  display: block;
  line-height: 1;
  padding: .6rem 1rem;
  border: 1px solid LightSeaGreen;
  color: black;
  text-decoration: none;
}
 
.accordionCss_content{
  display: none;
  padding: 1px 1rem;
}
 
.accordionCss_ghost{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background-color: rgba(100,100,100, 0);
}
  
.accordionCss_content:target{
  display: block;
}
 
.accordionCss_content:target ~ .accordionCss_ghost{
  height: 35px;
}
0
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
04.02.2019, 16:34

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Как полностью закрыть приложение?
Установил официальное приложение Вконтакта на планшет. Уведомления о новых сообщениях приходят даже...

Как полностью закрыть форму?
Как полностью закрыть форму? То есть у меня есть Form1 и Form2 . Form1 - это меню Form2 - это...

Как закрыть приложение полностью
Всем привет. Ситуация такая: Существует в проекте форма Main с 16-ю Label. Далее программно...

Как полностью закрыть от ЯКЗР?
Как полностью закрыть сайт от ЯКЗР и Мейла но при этом не навредить ботам Гугла и Рамблера?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.