Доброго времени суток! Надеюсь на помощь участников форума.
Объяню что хочу получить. Внутри таблицы хочу сделать раскрывающиеся пункты из первого столбика, чтобы можно было прочитать пояснение.
Добавляю все это в Adobe Muse посредством вставки html из Exel (таблица в центре нужна, подгоняю по пикселям), потом загружаю на сайт через функцию публикации, чтобы не сохранять ничего на пк. Разбираюсь сам немного в html коде и что-то слабенько могу с css делать, скрипты имеют совершенно другой вид, похожий на код Basic или C, поэтому разобраться не могу. Привожу пример сразу с css кодом, т.к без него данный пост не имеет смысла.
С чем нужна помощь:
1. Голубой заголовок таблицы почему-то изменяется в размере по вертикали и все становится плохо - вся таблица едет как ей вздумается. Не знаю как исправить.
2. Надписи после добавления скрипта становятся по цвету как ссылки - полагаю, это через css можно исправить, но там такой огород, что для меня это сложно.
3. По клику список ведет себя двояко - раскрывается, сворачивается, раскрывается или раскрывается и сворачивается. Не понимаю опять, в чем косяк, т.к код отдельно ведет себе хорошо.
4. Еще не гуглил, но хотел позже добавить подсказку с текстом при наведении на текст, который можно кликнуть.
5. Не знаю, можно ли приводить другой сайт в пример, но вот у многих хостинг компаний раздел FAQ и помощь так устроены (но не внутри таблицы) - при клике раскрывается список и ничего не съезжает. Понравилось как оформлено вот тут
FAQ сайта и даже хотел код там скопировать через source страницы, но не вышло вообще ровным счетом ничего.
Заранее спасибо за любую помощь.
Сам код:
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;border-color:#999;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#999;color:#444;background-color:#F7FDFA;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#999;color:#fff;background-color:#26ADE4;}
.tg .tg-yw4l{vertical-align:top}
th.tg-sort-header::-moz-selection { background:transparent; }th.tg-sort-header::selection { background:transparent; }th.tg-sort-header { cursor:pointer; }table th.tg-sort-header:after { content:''; float:right; margin-top:7px; border-width:0 4px 4px; border-style:solid; border-color:#404040 transparent; visibility:hidden; }table th.tg-sort-header:hover:after { visibility:visible; }table th.tg-sort-desc:after,table th.tg-sort-asc:after,table th.tg-sort-asc:hover:after { visibility:visible; opacity:0.4; }table th.tg-sort-desc:after { border-bottom:none; border-width:4px 4px 0; }</style>
<table id="tg-0RK1w" class="tg">
<tr>
<th class="tg-yw4l">Продукт</th>
<th class="tg-yw4l">Кол-во</th>
<th class="tg-yw4l">Принадлежность в %</th>
<th class="tg-yw4l">Пояснение</th>
<th class="tg-yw4l">Действия</th>
<th class="tg-yw4l"></th>
</tr>
<tr>
<td class="tg-yw4l"><head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="view-source">
<a href="#">Superfaza Bronze (может)</a>
<div class="hide">При заходе с WEB браузера защита может попросить телефон.
Работает однозначно точно Москва/Питер, возможны ответы на вопросы по почте сервиса yandex.ru (можно найди в соответствующем разделе).
Поля заполнить обязательно, обратить внимание на профиль.
Формат:
Name:LastName;skype;workmail;AccountNumber:reg_id;DeviceName;BrowserName</div>
</div>
<script>
$(function(){
$('.view-source .hide').hide();
$a = $('.view-source a');
$a.on('click', function(event) {
event.preventDefault();
$a.not(this).next().slideUp(500);
$(this).next().slideToggle(500);
});
});
</script>
</body>
</td>
<td class="tg-yw4l">10</td>
<td class="tg-yw4l">2</td>
<td class="tg-yw4l">тут любая информация — критерии чего-то</td>
<td class="tg-yw4l">Посмотреть</td>
<td class="tg-yw4l">Отправить</td>
</tr>
<tr>
<td class="tg-yw4l"><head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="view-source">
<a href="#">Superfaza Super Bronze (может)</a>
<div class="hide">При заходе с WEB браузера защита может попросить телефон.
Работает однозначно точно Москва/Питер, возможны ответы на вопросы по почте сервиса yandex.ru (можно найди в соответствующем разделе).
Поля заполнить обязательно, обратить внимание на профиль.
Формат:
Name:LastName;skype;workmail;AccountNumber:reg_id;DeviceName;BrowserName</div>
</div>
<script>
$(function(){
$('.view-source .hide').hide();
$a = $('.view-source a');
$a.on('click', function(event) {
event.preventDefault();
$a.not(this).next().slideUp(500);
$(this).next().slideToggle(500);
});
});
</script>
</body>
</td>
<td class="tg-yw4l">0</td>
<td class="tg-yw4l">3</td>
<td class="tg-yw4l">тут любая информация — критерии чего-то</td>
<td class="tg-yw4l">Посмотреть</td>
<td class="tg-yw4l">Отправить</td>
</tr>
<tr>
<td class="tg-yw4l">Superfaza Vip Bronze (может)</td>
<td class="tg-yw4l">0</td>
<td class="tg-yw4l">5</td>
<td class="tg-yw4l">тут любая информация — критерии чего-то</td>
<td class="tg-yw4l">Посмотреть</td>
<td class="tg-yw4l">Отправить</td>
</tr>
<tr>
<td class="tg-yw4l">Superfaza Silver</td>
<td class="tg-yw4l">22</td>
<td class="tg-yw4l">8</td>
<td class="tg-yw4l">тут любая информация — критерии чего-то</td>
<td class="tg-yw4l">Посмотреть</td>
<td class="tg-yw4l">Отправить</td>
</tr>
<tr>
<td class="tg-yw4l">Superfaza Super Silver</td>
<td class="tg-yw4l">1340</td>
<td class="tg-yw4l">10</td>
<td class="tg-yw4l">тут любая информация — критерии чего-то</td>
<td class="tg-yw4l">Посмотреть</td>
<td class="tg-yw4l">Отправить</td>
</tr>
<tr>
<td class="tg-yw4l">Superfaza Vip Silver</td>
<td class="tg-yw4l">0</td>
<td class="tg-yw4l">15</td>
<td class="tg-yw4l">тут любая информация — критерии чего-то</td>
<td class="tg-yw4l">Посмотреть</td>
<td class="tg-yw4l">Отправить</td>
</tr>
<tr>
<td class="tg-yw4l">Superfaza Gold</td>
<td class="tg-yw4l">25</td>
<td class="tg-yw4l">20</td>
<td class="tg-yw4l">тут любая информация — критерии чего-то</td>
<td class="tg-yw4l">Посмотреть</td>
<td class="tg-yw4l">Отправить</td>
</tr>
<tr>
<td class="tg-yw4l">Superfaza Super Gold</td>
<td class="tg-yw4l">20</td>
<td class="tg-yw4l">40</td>
<td class="tg-yw4l">тут любая информация — критерии чего-то</td>
<td class="tg-yw4l">Посмотреть</td>
<td class="tg-yw4l">Отправить</td>
</tr>
<tr>
<td class="tg-yw4l">Superfaza Vip Gold</td>
<td class="tg-yw4l">281</td>
<td class="tg-yw4l">40</td>
<td class="tg-yw4l">тут любая информация — критерии чего-то</td>
<td class="tg-yw4l">Посмотреть</td>
<td class="tg-yw4l">Отправить</td>
</tr>
<tr>
<td class="tg-yw4l">Superfaza Platinum</td>
<td class="tg-yw4l">967</td>
<td class="tg-yw4l">50</td>
<td class="tg-yw4l">тут любая информация — критерии чего-то</td>
<td class="tg-yw4l">Посмотреть</td>
<td class="tg-yw4l">Отправить</td>
</tr>
</table>
