Скрытие проема в аккордеоне

Question

Мне нужна помощь в сокрытии/скрытии соседних пространств. Я создаю серию часто задаваемых вопросов, используя структуру аккордеона. Мне нужно, чтобы каждый вопрос усекался по умолчанию, но при нажатии на него вопрос должен появляться полностью. Наконец, когда щелкнут Open FAQ (или другой), вопрос должен вернуться к его укороченной форме.

Моя разметка этой формы - где я поместил усеченную версию вопроса в одном промежутке и untruncated версии в соседнем пролете:

> <div class="accord"><h4><span class="shortver">What steps do I need to 
> take to ...</span><span class="longver hide">What steps do I need to 
> take to install a constructed wetland?</span></h4><div 
> class="faqcontent">Answer goes here</div>...</div> 

Следующая функция контролирует FAQ:

function fnSetUpPageFAQAccordion(){ 
    $(".accord > div").hide(); 
    $(".accord > h4").click(function(){   
    $(this).find('span.shortver').addClass("hide").next('span.longver').removeClass('hide'); 
    $(this).toggleClass("close").siblings("h4.close").removeClass("close"); 
    $(this).next("div").slideToggle("1500").siblings("div:visible").slideUp("1000");return; 
    }); }; 

Этот код закрывает усеченную версию вопроса и открывает полную версию при нажатии на кнопку «FAQ». Я не могу понять, как изменить эту последовательность, когда снова нажимается «FAQ» (или нажимается другой FAQ на странице).

Любые предложения - возможно, есть лучший подход вообще?

Благодаря/Bruce

Answer 1

Вот несколько иной подход, и решение. Я думаю, вы могли бы упростить это. Вместо того, чтобы иметь 1 пролет с короткой версией и 1 с длинной версией, положите начало объяснения в первом (назовем его class = "questionStart"), а остальное - во втором (class = "questionEnd") , Таким образом, вы можете оставить начало всегда видимым и только беспокоиться о переключении класса на второй. Это проще, но вам нужно будет удалить «...», что может оказаться нецелесообразным для потери читаемости.

Чтобы устранить проблему сокрытия элемента при нажатии на что-либо еще, попробуйте добавить событие onClick, которое сначала добавит класс hide во все прокрутки questionEnd, а затем переключит его только на тот, на который вы нажали , Я не пробовал, но думаю, что вы могли бы сделать эту работу довольно легко либо с помощью своего первоначального подхода, либо с моим.