Не знаю как правильно сформулировать вопрос в 4 слова(

[CatInTheBread]

Всем джамбо. Есть страничка с кнопками...http://osobniak.com/дизайн-интерьеров

Кнопки стоят вертикально и контент открывается соответственно блоком под каждой кнопкой. Хотелось бы сделать все по симпатичнее. Например кнопки горизонтально, и при нажатии открывался блок с контентом на всю ширину страницы или кнопки вертикально с лева, а контент открывался с права...

Если есть идеи буду признателен! Вот код кнопок.

<!-- Lightbox Plus ColorBox v2.6/1.3.32 - 2013.01.24 - Message: 0--><script type="text/javascript">
function onclick(event) {
console.log("text1");
var txt = event.target.innerText;
if (txt == "Современные интерьеры")
{
jQuery("#ToggleRestavration").slideToggle("slow");
}
else if (txt == "Классические интерьеры")
{
jQuery("#ToggleBaton").slideToggle("slow");
}
else if (txt == "Интерьеры для офиса")
{
jQuery("#ToggleElseBaton").slideToggle("slow");
}
else if (txt == "Интерьеры для ресторана")
{
jQuery("#TogglePestapan").slideToggle("slow");
}
};
jQuery(document).ready(function($){
$("a[rel*=lightbox]").colorbox({speed:0,width:false,height:false,innerWidth:false,innerHeight:false,initialWidth:false,initialHeight:false,maxWidth:false,maxHeight:false,scalePhotos:false,opacity:0,preloading:false,current:" {current} {total}",previous:"",next:"",close:"",overlayClose:false,loop:false,scrolling:false,escKey:false,arrowKey:false,top:false,right:false,bottom:false,left:false});
$("button").each(function(item) {
$(this).click(onclick);
});
});
</script>
<style>

.but_lavender {
margin: 10px 0px 0px 0px;
text-decoration: none !important;
color: #333;
font: 100% Arial, Helvetica, sans-serif;
padding: 5px 13px;
font-size: 13px;
border: solid 1px #aaa;
border-color: #99958c;
background: #c0c0c0;
background: -moz-linear-gradient(top, #f7f0fe 0%, #e8d1ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f0fe), color-stop(100%,#e8d1ff));
background: -webkit-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
background: -o-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
background: -ms-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f0fe', endColorstr='#e8d1ff',GradientType=0 );
background: linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
vertical-align: middle;
display: inline-block;
zoom:1;
*display:inline;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
}
.but_lavender:hover {
text-decoration: none;
background: #d0f0c0;
}
.but_lavender:active {
position: relative;
top: 1px;
}
</style>

Или может кто знает как это сделать вообще не прибегая к использованию кнопок?!?

Edited June 6, 2013 by CatInTheBread

[CatInTheBread]

ахаха)) Ну я не знаю как правильно объяснить) щас скину рисунок Игоря которому 3 года=)

http://itmages.ru/image/view/1067747/72d3b2f1

То есть идея в том, что есть верхний ряд кнопок каждая со своим контентом и внутри например 3тьей кнопки есть еще ряд кнопок опять же каждая со своим контеном.

[hypnocolor]

Ну тут уже немного больше придётся написать.. Я только с работы, поэтому, разве что, чуть позже вариант накидаю.

[CatInTheBread]

Как вам будет угодно! Я вообще удивлен что вы откликнулись на мою просьбу) Видимо не перевились в наше время с общепринятым меркантильным мышлением отзывчивые люди

[hypnocolor]

На скорую руку набросал как-то так, если всё правильно понял — http://jsfiddle.net/hypnocolor/hhwue/1/

Последние три слоя с информацией соответствуют трём дополнительным кнопкам, выпадающим из третьей основной.

[CatInTheBread]

эмм..видимо я действительно описал свою проблему как то по кривому)

Я имел ввиду что когда нажимаешь на 3 кнопку открывается контент содержащий другие кнопки (расположенные горизонтально) со своим же контентом=)

[hypnocolor]

http://jsfiddle.net/hypnocolor/PbRez/

Громоздко получилось, но мозг перегружен сейчас..

[CatInTheBread]

Спасибо!) только одна извечная проблема) скрипт категорически не хочет работать на сайте(

http://osobniak.com/dddd

[hypnocolor]

У вас в коде скрипта параграфы опять воткнулись (</p><p>), их не должно там быть. Вообще, пользуйтесь отладчиком в браузере, ошибки видно сразу.

[CatInTheBread]

и еще раз спасибо) опять все заработало заменой $(function(){ на jQuery(document).ready(function($){ =D

[CatInTheBread]

hypnocolor

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

Edited June 18, 2013 by CatInTheBread

[CatInTheBread]