Кнопка "Читать полностью" открывает только нужный блок
Здравствуйте! Есть страница "вопрос-ответ" (более 20 вопросов), изначально виден только сокращенный вариант ответа. Подскажите как сделать, чтобы при нажатии на кнопку "Читать полностью" открывался div с полным ответом? Сам попробовал сделать, но скрипт применяется ко всем вопросам ) Как сделать так, чтобы открывался только конкретный ответ, а при нажатии на "Свернуть назад" возвращался короткий вариант ?
Вот html и js (который написал сам): </div> <div class="issues f22px"> <div class="client_name it">Андрей (вопрос):</div> <div class="txt_qq f20px">Здравствуйте! Квартира находится в долевой собственности у двух человек. Квартира в новостройке, менее 3 лет. Как будет рассчитываться налог при продаже?</div> <div class="agent_name it">Наталья Жукова (ответ):</div> <div class="txt_answer f20px">При продаже НДФЛ 13% от суммы продажи, уменьшенной на сумму денежных средств, затраченных на ее приобретении, включая сумму уплаченных по ипотечному кредиту %, если таковые были.</div> <div class="txt_answer_more f14px it cursor">Читать полностью<img class="more_img" src="images/qq/more.png"></div> <div class="txt_answer_full f20px">При продаже НДФЛ 13% от суммы продажи, уменьшенной на сумму денежных средств, затраченных на ее приобретении, включая сумму уплаченных по ипотечному кредиту %, если таковые были. А, если в договоре указано, что квартира приобреталась без отделки, можно будет еще уменьшить налогооблагаемую базу на сумму документально доказанных расходов на отделку квартиры ( но не все позиции расходов налоговая принимает к вычету - надо у них уточнять).</div> <div class="txt_answer_less f14px it cursor">Свернуть назад<img class="less_img" src="images/qq/less.png"></div> </div> </div> <div class="issues f22px"> <div class="client_name it">Андрей (вопрос):</div> <div class="txt_qq f20px">Здравствуйте! Квартира находится в долевой собственности у двух человек. Квартира в новостройке, менее 3 лет. Как будет рассчитываться налог при продаже?</div> <div class="agent_name it">Наталья Жукова (ответ):</div> <div class="txt_answer f20px">При продаже НДФЛ 13% от суммы продажи, уменьшенной на сумму денежных средств, затраченных на ее приобретении, включая сумму уплаченных по ипотечному кредиту %, если таковые были.</div> <div class="txt_answer_more f14px it cursor">Читать полностью<img class="more_img" src="images/qq/more.png"></div> <div class="txt_answer_full f20px">При продаже НДФЛ 13% от суммы продажи, уменьшенной на сумму денежных средств, затраченных на ее приобретении, включая сумму уплаченных по ипотечному кредиту %, если таковые были. А, если в договоре указано, что квартира приобреталась без отделки, можно будет еще уменьшить налогооблагаемую базу на сумму документально доказанных расходов на отделку квартиры ( но не все позиции расходов налоговая принимает к вычету - надо у них уточнять).</div> <div class="txt_answer_less f14px it cursor">Свернуть назад<img class="less_img" src="images/qq/less.png"></div> </div>
jQuery('.txt_answer_more').click(function(){
jQuery('.txt_answer_full').addClass('active');
jQuery('.txt_answer').addClass('posiv');
jQuery('.issues').addClass('newheight');
jQuery('.txt_answer_more').addClass('posiv');
jQuery('.txt_answer_less').addClass('active');
});
jQuery('.txt_answer_less').click(function(){
jQuery('.txt_answer_full').removeClass('active');
jQuery('.txt_answer').removeClass('posiv');
jQuery('.issues').removeClass('newheight');
jQuery('.txt_answer_more').removeClass('posiv');
jQuery('.txt_answer_less').removeClass('active');
});
|
Цитата:
В данном случае нужно обращаться не по классу, а к "соседним" элементам. Т.е. к следующим при открытии и к предыдущим при закрытии. ;) Пример тестовый ты не дал... Т.ч. показать не на чем. |
Вроде как контейнеров хватает...
Набросок решения
<style>
.txt_answer_full { display:none;}
.txt_answer_less { display:none;}
</style>
<div class="issues f22px">
<div class="client_name it">Андрей (вопрос):</div>
<div class="txt_qq f20px">Здравствуйте! Квартира находится в долевой собственности у двух человек. Квартира в новостройке, менее 3 лет. Как будет рассчитываться налог при продаже?</div>
<div class="agent_name it">Наталья Жукова (ответ):</div>
<div class="txt_answer f20px">При продаже НДФЛ 13% от суммы продажи, уменьшенной на сумму денежных средств, затраченных на ее приобретении, включая сумму уплаченных по ипотечному кредиту %, если таковые были.</div>
<div class="txt_answer_more f14px it cursor">Читать полностью</div>
<div class="txt_answer_full f20px">При продаже НДФЛ 13% от суммы продажи, уменьшенной на сумму денежных средств, затраченных на ее приобретении, включая сумму уплаченных по ипотечному кредиту %, если таковые были. А, если в договоре указано, что квартира приобреталась без отделки, можно будет еще уменьшить налогооблагаемую базу на сумму документально доказанных расходов на отделку квартиры ( но не все позиции расходов налоговая принимает к вычету - надо у них уточнять).</div>
<div class="txt_answer_less f14px it cursor">Свернуть назад</div>
</div>
<div class="issues f22px">
<div class="client_name it">Андрей (вопрос):</div>
<div class="txt_qq f20px">Здравствуйте! Квартира находится в долевой собственности у двух человек. Квартира в новостройке, менее 3 лет. Как будет рассчитываться налог при продаже?</div>
<div class="agent_name it">Наталья Жукова (ответ):</div>
<div class="txt_answer f20px">При продаже НДФЛ 13% от суммы продажи, уменьшенной на сумму денежных средств, затраченных на ее приобретении, включая сумму уплаченных по ипотечному кредиту %, если таковые были.</div>
<div class="txt_answer_more f14px it cursor">Читать полностью</div>
<div class="txt_answer_full f20px">При продаже НДФЛ 13% от суммы продажи, уменьшенной на сумму денежных средств, затраченных на ее приобретении, включая сумму уплаченных по ипотечному кредиту %, если таковые были. А, если в договоре указано, что квартира приобреталась без отделки, можно будет еще уменьшить налогооблагаемую базу на сумму документально доказанных расходов на отделку квартиры ( но не все позиции расходов налоговая принимает к вычету - надо у них уточнять).</div>
<div class="txt_answer_less f14px it cursor">Свернуть назад</div>
</div>
<script>
var more = document.querySelectorAll('.txt_answer_more');
[].forEach.call(more, function(el,i) {
el.addEventListener("click", function () {
this.style.display = "none";
el.parentNode.querySelector('.txt_answer').style.display = "none";
el.parentNode.querySelector('.txt_answer_full').style.display = "block";
el.parentNode.querySelector('.txt_answer_less').style.display = "block";
});
});
var less = document.querySelectorAll('.txt_answer_less');
[].forEach.call(less, function(el,i) {
el.addEventListener("click", function () {
this.style.display = "none";
el.parentNode.querySelector('.txt_answer_full').style.display = "none";
el.parentNode.querySelector('.txt_answer').style.display = "block";
el.parentNode.querySelector('.txt_answer_more').style.display = "block";
});
});
</script>
|
Спасибо огромное!!! Все получилось ) Сам бы не справился точно ))
|
| Часовой пояс GMT +3, время: 17:21. |