On click get data attribute and place inside div

Question

I have a number of links with various data attributes assigned to them, and am trying to grab the content of data-short-description attribute when the link is clicked. The content of data-short-description would then be set into the .description div. This process would be repeated each time a different link is clicked, replacing the content inside .description.

I am able to hack JS but not fluent enough to write from scratch, so if somebody could help me using a mixture of (I assume) .data(),.onclick() etc that would be great.

A simplified version of my code:

HTML

<div id="container">
  <div class="thumbnails">
    <figure class="thumbnail">
      <a href="#" data-short-description="DESCRIPTION 1 HERE!">
        <img src="#">
      </a>
    </figure>
    <figure class="thumbnail">
      <a href="#" data-short-description="DESCRIPTION 2 HERE!">
        <img src="#">
      </a>
    </figure>
    <figure class="thumbnail">
      <a href="#" data-short-description="DESCRIPTION 3 HERE!">
        <img src="#">
      </a>
    </figure>
  </div>
</div>

<div class="description">
    data-short-description to go here upon clicking link.
</div>

Answer 1

A huge thank you to @hexaholic for the following answer. Brilliant!

HTML

<div class="container">
    <div class="thumbnails">
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 1 HERE!">
                <img src="#">
            </a>
        </figure>
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 2 HERE!">
                <img src="#">
            </a>
        </figure>
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 3 HERE!">
                <img src="#">
            </a>
        </figure>
    </div>
</div>

<div class="description">
    data-short-description to go here upon clicking link.
</div>

<div class="container">
    <div class="thumbnails">
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 1 HERE!">
                <img src="#">
            </a>
        </figure>
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 2 HERE!">
                <img src="#">
            </a>
        </figure>
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 3 HERE!">
                <img src="#">
            </a>
        </figure>
    </div>
</div>

<div class="description">
    data-short-description to go here upon clicking link.
</div>

JS

<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function() {

        // updates a description box with the value of the given link
        function updateDescription(link) {

            // find the parent container
            var parentContainer = link.closest('.container');

            // the description box comes right after the container
            var targetDiv = parentContainer.next();

            //finally, update the content
            targetDiv.html(link.attr('data-short-description'));
        };

        // fill in default description for each container
        $('.container').each(function() {
            var firstLink = $(this).find('.description-link').first();
            updateDescription(firstLink);
        });

        // change description when a link is clicked
        $('.description-link').click(function() {
            // call the update function
            updateDescription($(this));
        });
    });
</script>

Answer 2

Since you tagged your question with jQuery, I guess it's fine for me to use it.

<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function() {
        $('.thumbnail a').click(function() {
            $('.description').html($(this).attr('data-short-description'));
        });
    });
</script>

But, as alou mentioned, you could provide a class for the links and give the target div an own id. I used class="description-link" and id="description", so the whole thing looks like this:

<div id="container">
    <div class="thumbnails">
        <figure class="thumbnail">
            <a class="description-link" id="default-description" href="#" data-short-description="DESCRIPTION 1 HERE!">
                <img src="#">
            </a>
        </figure>
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 2 HERE!">
                <img src="#">
            </a>
        </figure>
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 3 HERE!">
                <img src="#">
            </a>
        </figure>
    </div>
</div>

<div id="description">
    data-short-description to go here upon clicking link.
</div>

<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function() {
        // fill in default description on page load
        $('.description').html($('#default-description').attr('data-short-description'));

        // change description when a link is clicked
        $('.description-link').click(function() {
            $('#description').html($(this).attr('data-short-description'));
        });
    });
</script>

Answer 3

This should do it

$('.thumbnail a').on('click', function(evt){
  evt.preventDefault(); //dont do default anchor stuff
  var description = $(this).data('short-description'); //get the text
  $('.description').html(description);
});

However it would be better to use a generic class for the specific set of links, like descriptionlink or something and use this to trigger the event $('.descriptionlink').on('click'... and an id for the target (maybe the same as the class, #description )

Other than that should be fine.