Горизонтальный Accordian Toggle

Question

Я только начал изучать jQuery и пытаюсь создать раздел на моем личном сайте, который имеет список изображений в строке, когда кто-то нажимает на изображение, которое появляется абзац.

Код - https://jsfiddle.net/ceo123/my4Lhkkv/3/

<section> 
    <img class="expand-one" src="" alt="Number 1" /> 
    <p class="content-one">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 

    <img class="expand-two" src="" alt="Number 2" /> 
    <p class="content-two">This is the second paragraph.</p> 

    <img class="expand-three" src="" alt="Number 3" /> 
    <p class="content-three">This rocks! Let's work on some more stuff.</p> 
</section> 

Этот пункт должен -

• Появляются ниже IMG и выравнивание по левому краю в разделе
• Когда выбран другой IMG, в р изменения к присваивать выделение
• Текст в p-шоу занимает ширину раздела
• Если ширина экрана уменьшается, и ГИМ стек, р следует еще расширить под его IMG строки и следующей

Мой вопрос - Как я могу получить направление переключения скользить вниз а затем, чтобы текст p оставался выровненным в секции каждый раз? Благодаря!

Редактировать # 1: Я обновил свой код. Достигнут далеко, но не может центрировать расширяющуюся секцию. Пожалуйста, дайте мне знать, если у вас есть идеи. Спасибо.

Редактировать # 2: Решение - https://jsfiddle.net/92uhs075/2/ Работал над этим и решил проблему без jQuery, используя только html и css.

Answer 1

Возможно, я выключен. Это то, что вы искали? https://jsfiddle.net/my4Lhkkv/4/

<section> 
<div class="images"> 
    <img class="expand-one" src="" alt="Number 1" /> 
    <img class="expand-two" src="" alt="Number 2" /> 
    <img class="expand-three" src="" alt="Number 3" /> 
</div> 

<div class="text"> 
    <p class="content-two">This is the second paragraph.</p> 
    <p class="content-one">Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit.</p> 
    <p class="content-three">This rocks! Let's work on some more stuff.</p> 
</div> 
</section> 

img { 
    float: left; 
    height: 200px; 
    width: 200px; 
    background: lightblue; 
    margin: 10px; 
} 

p { 
    display: none; 
} 

.text { 
    float: left; 
}