Кнопка "Читать полностью" открывает только нужный блок
Здравствуйте! Есть страница "вопрос-ответ" (более 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, время: 14:55. |