Как реализовать выпадающий блок?

Question

[game802]

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

"iphone_price_block" == $(this).data("price") : ($(".bg3 .ipad_price_block").fadeOut(0), $(".bg3 .mac_price_block").fadeOut(0), $(".bg3 .iphone_price_block").fadeIn(400)),
"mac_price_block" == $(this).data("price") : ($(".bg3 .ipad_price_block").fadeOut(0), $(".bg3 .iphone_price_block").fadeOut(0), $(".bg3 .mac_price_block").fadeIn(400)),
"ipad_price_block" == $(this).data("price") : ($(".bg3 .iphone_price_block").fadeOut(0), $(".bg3 .mac_price_block").fadeOut(0), $(".bg3 .ipad_price_block").fadeIn(400))

Этот код отвечает за скрытие и раскрытие блока по нажатию на кнопку. Не могли бы вы мне подсказать в чем моя ошибка? Так как он показывает совершенно рандомные блоки при клике мышкой на кнопку.
Всего имеется 3 блока, но как и раскрывать при рандомном нажатии, не знаю....
Буду очень благодарен за помощь в решении данного вопроса.
Вот скрин этих кнопок, для более ясного понимания:

Comments

[Abdula Magomedov]

Это что за нереальный код.

[game802]

Abdula Magomedov: быдлокод, если быть точнее

[Модератор]

game802, за порчу вопросов будет больно.

Answer 1

[Abdula Magomedov]

$(".tButton").click(function(){
        var showBlockClass = $(this).data("price"); 
        $(".bg3").fadeOut(0);
        $("."+showBlockClass).fadeIn(400);
});

Comments

[game802]

Я наговнокодил и получилось вот так, спасибо за подсказку
$(".btnka1").click(function(){
$(".mac_price_block").fadeOut(0);
$(".ipad_price_block").fadeOut(0);
$(".iphone_price_block").fadeIn(400);
});

$(".btnka2").click(function(){
$(".mac_price_block").fadeOut(0);
$(".iphone_price_block").fadeOut(0);
$(".ipad_price_block").fadeIn(400);
});

$(".btnka3").click(function(){
$(".ipad_price_block").fadeOut(0);
$(".iphone_price_block").fadeOut(0);
$(".mac_price_block").fadeIn(400);
});

[Abdula Magomedov]

HackOwnB: )) лучше поискать блоки один раз и хранить в переменных. Каждый раз при нажатии на кнопку делать поиск элементов это не эффективно

Answer 2

[WQP]

Код не проверял, но работать должен

<a href="#" class="btn" data-active="block-item-1">Блок #1</a>
<a href="#" class="btn" data-active="block-item-2">Блок #2</a>
<a href="#" class="btn" data-active="block-item-3">Блок #3</a>

<div class="block-item block-item-1">
	Текст блока #1
</div>

<div class="block-item block-item-2">
	Текст блока #2
</div>

<div class="block-item block-item-3">
	Текст блока #3
</div>

$('.btn').click(function(event) {
	event.preventDefault();

	var blocks = $('.block-item'), 
		active = $(this).data('active');

	blocks.fadeOut(0);
	$('.block-item.'+active).fadeIn(400);
});

Comments

[game802]

большое спасибо за помощь!