Как при нажатии на каждую кнопку менялся текст только для этого блока?

Question

[Anna-17]

Здравствуйте. Нужна помощь. На карточке товаров нужно сделать так, чтобы поменялась описание товара на разных материалах. Хочу поставить две кнопки, чтобы при нажатии первого открылась описана для первого товара а при нажатии второго открылась описание второго товара. Это для сайта интернет магазин.

<div class="button">
    <div class="title">Alvic</div>
    <div class="title">Плёнка ПВХ (глянец)</div>
</div>

<!--Projects 1-->
<div class="project">
    <p>Text1 Свойства товара -- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut consectetur, consequuntur debitis
        distinctio dolorem enim, error et eum ex fuga minima natus obcaecati perferendis provident quia
        reiciendis vero voluptatibus.</p>
</div>

<!--Projects 2-->
<div class="project" style="display: none;">
    <p>Text2 Свойства товара -- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut consectetur, consequuntur debitis
        distinctio dolorem enim, error et eum ex fuga minima natus obcaecati perferendis provident quia
        reiciendis vero voluptatibus.</p>
</div>

Answer 1

[cssfish]

в css добавляете класс для активного элемента

.project { display:none;}
.project.is-active { display:block;}

переключаете (например JQ)

$(".button .title").on("click", function(){
 var ind = $(this).index();
 $(".project")
    .removeClass("is-active")
    .eq(ind).addClass("is-active");
  return false;
});

upd:
на практике лучше переписать на универстальные классы, tabs например

Comments

[Anna-17]

Спасибо большое за помощь. Но выдает ошибка

[cssfish]

Anna-17, ну так это был пример на jquery
он у вас подключен?

плюс запускать надо внутри обертки, типа :

(function($, undefined){ 
$(function(){

$(".button .title").on("click", function(){
 var ind = $(this).index();
 $(".project")
    .removeClass("is-active")
    .eq(ind).addClass("is-active");
  return false;
});

});
})(jQuery);

[Anna-17]

cssfish,


Заработал, но когда нажимаю исчезает и больше не появляется класс is-active, сможете сделать так чтобы повторно появлялся, при нажатие на вторую кнопку? Посмотрите на ссылку пожалуйста. Спасибо большое за поддержку.

[cssfish]

Anna-17, делайте рабочий пример, посмотрим.

[Anna-17]

Помогите пожалуйста, сегодня целый день мучаюсь )) Посмотрите, блок находиться перед похожие товары.

[Anna-17]

cssfish,
class is-active с первой клика удаляет и больше не появляется

[Anna-17]

cssfish, Исправил ))) Нашел ошибку))
Вы там писали ind - .eq(ind).addClass("is-active"); понял что надо писать id

[Anna-17]

cssfish, Спасибо большое за помощь. Удачи вам )

[cssfish]

Anna-17, точно, переменная ind (индекс) там. сейчас поправлю код

[Anna-17]

cssfish, ааа поняла, значит на верху надо писать ind )) а не внизу id)