Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Кнопка "Читать полностью" открывает только нужный блок (https://javascript.ru/forum/misc/72399-knopka-chitat-polnostyu-otkryvaet-tolko-nuzhnyjj-blok.html)

Noonf 26.01.2018 16:27

Кнопка "Читать полностью" открывает только нужный блок
 
Здравствуйте! Есть страница "вопрос-ответ" (более 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');

});

ksa 26.01.2018 16:43

Цитата:

Сообщение от Noonf
Как сделать так, чтобы открывался только конкретный ответ, а при нажатии на "Свернуть назад" возвращался короткий вариант ?

Желательно все связанные элементы помещать в один общий контейнер. Тогда работать проще и понятнее.

В данном случае нужно обращаться не по классу, а к "соседним" элементам. Т.е. к следующим при открытии и к предыдущим при закрытии. ;)

Пример тестовый ты не дал... Т.ч. показать не на чем.

Dilettante_Pro 26.01.2018 17:15

Вроде как контейнеров хватает...
Набросок решения
<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>

Noonf 26.01.2018 17:44

Спасибо огромное!!! Все получилось ) Сам бы не справился точно ))


Часовой пояс GMT +3, время: 14:55.