Question

Having a little trouble with jQuery, please help.

I need to grab the contents of p class=”area-desc when class=”caption is clicked and display it in class=”step-area.

html:

<ul id="main-areas" class="group">
                <li>
                    <div class="build-area">
                        <span class="caption bg">Planning</span>
                    </div>
                    <p class="area-desc">1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a accumsan dolor. Curabitur rutrum augue nec eros blandit egestas. Aliquam lobortis posuere facilisis. Integer rutrum ullamcorper erat ac tempor. Nulla nec sapien nibh, non consequat dui.</p>
                </li>
                <li>
                    <div class="build-area">
                        <span class="caption bg">Arcitecture</span>
                    </div>
                    <p class="area-desc">2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a accumsan dolor. Curabitur rutrum augue nec eros blandit egestas. Aliquam lobortis posuere facilisis. Integer rutrum ullamcorper erat ac tempor. Nulla nec sapien nibh, non consequat dui.</p>
                </li>
                <li>
                    <div class="build-area">
                        <span class="caption bg">Interior Design</span>
                    </div>
                    <p class="area-desc">3Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a accumsan dolor. Curabitur rutrum augue nec eros blandit egestas. Aliquam lobortis posuere facilisis. Integer rutrum ullamcorper erat ac tempor. Nulla nec sapien nibh, non consequat dui.</p>
                </li>
                <li>
                    <div class="build-area">
                        <span class="caption bg">Construction</span>
                    </div>
                    <p class="area-desc">4Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a accumsan dolor. Curabitur rutrum augue nec eros blandit egestas. Aliquam lobortis posuere facilisis. Integer rutrum ullamcorper erat ac tempor. Nulla nec sapien nibh, non consequat dui.</p>
                </li>
            </ul>
            <div class="step-area bg">

            </div>

jQuery:

$('span.caption').click(function() {
        var step = $('p.area-desc').html();
        $('.step-area').html("<p>" + step + "</p>");
    });

At the moment all that code does is grabs the contents of the first p tag and displays it in the desired div.

What I need is a way of showing each description in .step-area on every click.

Answer 1

$('span.caption').click(function() {
    var step = $(this).parent().next().html();
    $('.step-area').html("<p>" + step + "</p>");
});

To display first description on page load:

$(document).ready(function() {
    $('.step-area').html("<p>" + $('.area-desc:first').html() + "</p>");
});

---

Update: noscript

Docs: https://developer.mozilla.org/en-US/docs/HTML/Element/noscript

Example:

<noscript>
  <style>
    /* override your styles here */
  </style>
</noscript>