CODEWITHSUNDEEP
javascriptjqueryfunctionhtml
ProEvilz
ProEvilz

Reputation: 5455

How to display div with JavaScript depending on which image is clicked

I wish to display certain divs inside a main div dependent on which image is clicked. With out any decent knoweldge of Js or Jquery, I fail to do this without some assistance.

<form>
    <input type="hidden" name="prod">
    <div id="images">
        <img id="one" src="http://lorempixel.com/200/200/">
        <img id="two" src="http://lorempixel.com/201/200/ ">
        <img id="three" src="http://lorempixel.com/203/200/ ">
        <img id="four" src="http://lorempixel.com/204/200/ ">
    </div>
</form>     
<div id="description">
</div>

<div class="one">Brilliant</div>
<div class="two">Super</div>
<div class="tree">Amazing</div>
<div class="four">Excellent</div>

If the image which has id="one" is clicked, then display <div class="one">Brilliant</div> inside of the description div. Then ofcause if the second image is clicked, then display the the 'super' div inside the description div. I'd like to not have the descriptions visible until clicked, and only one div at a time to be shown.

The images are apart of a form because I need to forward the value of the id on the images to a variable.

Here is the script that does that.

$('#images').delegate('img', 'click', function () {
    var $this = $(this);
    // Clear formatting
    $('#images img').removeClass('border-highlight');

    // Highlight with coloured border
    $this.addClass('border-highlight');

    // Changes the value of the form field prod to the file name shown in the image.
    $('[name="prod"]').val($this.attr('id').substring($this.attr('id').lastIndexOf('-') + 1));

    //Alert for debugging simplicity
    alert($('[name="prod"]').val());
});

Perhaps a function can be implemented into the current script?

Here is a fiddle, and it will all make sense of what I have as a whole currently.

Upvotes: 2

Views: 258

Answers (2)

Eugen Dimboiu
Eugen Dimboiu

Reputation: 2793

Check out this fidde

You just need to add:

$('#description').html($('.' + $this.attr('id')).html());

At the bottom of your onclick function.

** You have a typo on the 3rd div with text(tree instead of three).

Upvotes: 2

Adil
Adil

Reputation: 148110

You can make it bit simple by adding the divs for description in div as I see no need to put the divs for description outside the description div and later adding it. You will need to hide all the divs we have in description div and show the one that is related to img being clicked.

Live Demo

Html

<input type="hidden" name="prod">
<div id="images">
    <img id="imgone" src="http://lorempixel.com/200/200" />
    <img id="imgtwo" src="http://lorempixel.com/201/200" />
    <img id="imgthree" src="http://lorempixel.com/203/200" />
    <img id="imgfour" src="http://lorempixel.com/204/200" />
</div>
<div id="description">
    <div id="one">Brilliant</div>
    <div id="two">Super</div>
    <div id="three">Amazing</div>
    <div id="four">Excellent</div>
</div>

Javascript

$('#images').delegate('img', 'click', function () {
    $('#description div').hide();
    $('#' + this.id.replace('img', '')).show();
});

Upvotes: 1

Related Questions