Databases
StackOverflow2013
Postsdbo
POHow to display div with JavaScript depending on which image is clicked
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to display div with JavaScript depending on which image is clicked
    text
    copied!<p>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.</p> <pre><code>&lt;form&gt; &lt;input type="hidden" name="prod"&gt; &lt;div id="images"&gt; &lt;img id="one" src="http://lorempixel.com/200/200/"&gt; &lt;img id="two" src="http://lorempixel.com/201/200/ "&gt; &lt;img id="three" src="http://lorempixel.com/203/200/ "&gt; &lt;img id="four" src="http://lorempixel.com/204/200/ "&gt; &lt;/div&gt; &lt;/form&gt; &lt;div id="description"&gt; &lt;/div&gt; &lt;div class="one"&gt;Brilliant&lt;/div&gt; &lt;div class="two"&gt;Super&lt;/div&gt; &lt;div class="tree"&gt;Amazing&lt;/div&gt; &lt;div class="four"&gt;Excellent&lt;/div&gt; </code></pre> <p>If the image which has <code>id="one"</code> is clicked, then display <code>&lt;div class="one"&gt;Brilliant&lt;/div&gt;</code> 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.</p> <p>The images are apart of a form because I need to forward the value of the <code>id</code> on the images to a variable.</p> <p>Here is the script that does that.</p> <pre><code>$('#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()); }); </code></pre> <p>Perhaps a function can be implemented into the current script?</p> <p>Here is a <a href="http://jsfiddle.net/NLbpJ/1/" rel="nofollow">fiddle</a>, and it will all make sense of what I have as a whole currently. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload