how do you toggle two images based on a button click


I am just trying to toggle two images based on the onclick of a button.

The trick is that whatever image that is currently showing I need it to display the other one on the onclick.

I have some collapsible div's on a  page with two images ("more.jpg" and "less.jpg")

You can select one div at a time to collapse or expand or you can push a button and have them all expand.

The problem is that if a user hits one div to expand it then hits the "all expand" button one of the images will be still set to "more.jpg" with the div expanded (should be less.jpg"

Is there any way to just toggle two images back and forth independently of what the other images are doing?

Who is Participating?
Julian HansenConnect With a Mentor Commented:
Have you looked at the JQuery .toggle() function
<div class="imagebox">
   <img src="more.jpg" />
<div class="imagebox" style="display:none">
   <img src="less.jpg" />
<button id="switch">click</button>
<script src=""></script>
<script type="text/javascript">
$(function() {
   $('#switch').click(function() {

Open in new window

SAMIR BHOGAYTAFreelancer and IT ConsultantCommented:
hi.. can you try this code please

Try this:

$(document).ready(function() {
  $("input[name=jpgSel]").change(function () {
    if (this.value == "0") {
        src: 'one.jpg',
        alt: 'one dot jpg'
    } else {
        src: 'two.jpg',
        alt: 'two dot jpg'

Open in new window

smfmetro10Author Commented:
Outstanding! Thanks!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.