Кнопки Mulitple Read More работают неправильно

Question

Я работаю над сайтом, созданным на Wordpress, основной теме, используя визуальный композитор.

Сайт http://kingkongco.com.au/c-cor/about-us/ (извините, если он работает медленно, на сервере с сотнями других!)

Если вы прокрутите вниз, вы увидите раздел персонала, 9 человек, каждый с дополнительной функцией чтения ,

Проблемы:

• , когда пользователь открывает два или более блоков, а затем попадает «содержимое скрыть» один блок, он поворачивает обратно на «читать далее» для всех открытых блоков
• Также , при открытии стили текста выравниваются по левому краю (YAY!), но когда они закрыты, он не возвращается к выравниванию по центру.

Я рекомендую проверить HTML с помощью поджигатель (или что-то подобное), как это было построено в визуальном композитора выступе, однако, здесь все Релевент код этой ситуации:

HTML и (каждый блок идентичен для содержания) колонтитула Funtion кроме:

(function($) { 
 
    $('.showcontent').click(function() { 
 
    $(this).hide(); 
 
    $(this).parent().next('p').show(); 
 
    $(this).parent("p").css("text-align", "left"); 
 
    }) 
 
    $('.hidecontent').click(function() { 
 
    $(this).parent().hide(); 
 
    $('.showcontent').show(); 
 
    $(this).parent("p").css("text-align", "center"); 
 
    }) 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<img title="Howard Rupert" src="http://kingkongco.com.au/c-cor/wp-content/uploads/2016/08/profile1.png" alt="Howard Rupert" /> 
 
<h4 class="light">Howard Rupert</h4> 
 
<div class="position">account director</div> 
 
<p class="description">Howard is a highly capable, deeply experienced technical sales leader with a wealth of exposure to HFC Connectivity Equipment since 1989. Today he leads C-COR’s CONNECTIONS product 
 
    <a class="showcontent">Read more…</a> 
 
</p> 
 
<p class="cdscontainer">line which includes passive products such as coaxial cable, coaxial hard-line, cable connectors, optical cable, optical connectors, Taps and all other passive devices plus DOCSIS and RF test equipment. Howard joined C-COR from Pacific Broadband Networks 
 
    in 2014 where he was Sales Director for North America and Oceania sales. Previously, he served an extensive career with C-COR Inc. originally in USA and then in Hong Kong as an AsiaPac account leader. He developed country plans and engaged manufacturing 
 
    product line management for Connectivity Equipment requirements. Howard started in the DOCSIS Cable Networks industry in 1989. In this time, Howard has been part of an industry evolution from CableLabs DOCSIS 1.0 to the emerging DOCSIS 3.1 standard. 
 
    With over 25 years of international technical sales experience Howard has been engaged in optical cables, coaxial cables including experience in military product specifications and high current connectors. Howard was awarded a Masters of Business Administration 
 
    (University of Western Ontario) and a Bachelor of Science (Pennsylvania State University). 
 
    <a class="hidecontent">...Hide Content</a> 
 
</p>

Спасибо за любую помощь/советы/предложения!

Answer 1

Попробуйте заменить this на класс showcontent.

Когда вы нажимаете дальше, я в основном скрываю все классы showcontent, а затем просто открываю единственный, который вы нажали.

(function($) { 
$('.showcontent').click(function(){ 
    $('.showcontent').hide(); 
    $(this).parent().next('p').show(); 
    $(this).parent("p").css("text-align", "left"); 
}) 
$('.hidecontent').click(function(){ 
    $(this).parent().hide(); 
    $('.showcontent').show(); 
    $(this).parent("p").css("text-align", "center"); 
}) 
})(jQuery); 

Answer 2

Что происходит в вашем коде, что селектор «.showcontent» выбирает все классы из документа, но в моем коде я сначала выбрать родительский DIV, а затем найти класс «.showcontent» в внесите изменения. он совпадает с тегом 'p', так как мой код выравнивает все 'p' tage в div до центра или по мере необходимости:

(function($) { 
$('.showcontent').click(function(){ 
    $(this).hide(); 
    $(this).next('p').show(); 
    $(this).closest("div").find("p").css("text-align", "left"); //changed 
}); 
$('.hidecontent').click(function(){ 
    $(this).parent().hide(); 
    $(this).closest("div").find('.showcontent').show(); //changed 
    $(this).closest("div").find("p").css("text-align", "center"); //changed 
}); 
})(jQuery