0

Hello I have explored many ways of making an image appear upon clicking an element, such as display: block or visibility: visible or .show(). However the issue I am having is to have an image appear inside a different div container whose class matches the button id the user is hovering and clicking on. Also another issue making the image remain after click. Any advice would be great.

HTML

<div id="list">
  <div id="button-list">
    <ul>
        <li id="header1" class ="inactive"><h2>Upper Body</h2></li>
        <li id="front-neck" class="upper">Front Neck</li>
        <li id="back-neck" class= "upper">Back Neck</li>
        <li id="trapezius" class= "upper">Trapezius</li>
        <li id="shoulder" class= "upper">Shoulder</li>
        <li id="biceps" class= "upper">Bicep</li>
        <li id="triceps" class= "upper">Tricep</li>
        <li id="forearm" class= "upper">Forearm Extensor</li>
        <li id="forearm" class= "upper">Forearm Flexor</li>
        <li id="header2" class="inactive"><h2>Lower Body</h2></li>
        <li id="hamstring" class="lower">Hamstring</li>
        <li id="calf" class="lower">Calf</li>
        <li id="it-band" class="lower">IT Band</li>
        <li id="adductor" class="lower">Adductor</li>
        <li id="quadricep" class="lower">Quadricep</li>
    </ul>
    </div>  
</div>
    <div id="anatomy-container">
        <img class="front-neck" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/front-neck2.png"/></span>
        <img class="back-neck" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Back-Neck-2.png"/></span>
        <img class="trapezius" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Traps2.png"/></span>
        <img class="shoulder" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Interior-Deltoid2.png"/></span>
        <img class="biceps" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Bicep-2.png"/></span>
        <img class="triceps" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Tricep2.png"/></span>
        <img class="forearm" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/extensor2.png"/></span>
        <img class="forearm"src ="http:// m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/FLEXER2.png"/></span>
        <img class="hamstring" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Hammy2.png"/></span>
        <img class="calf"src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Calf2.png"/></span>
        <img class="it-band" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/IT-BAND-2.png"/></span>
        <img class="adductor" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Addcutor2.png"/></span>
        <img class="quadricep" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Quad2.png"/></span>
    </div>
<div id="list-container">
  <ul id="container">
  </ul>
</div>

CSS

 body {
  padding-top: 80px;
  text-align: center;
  font-family: monaco, monospace;

}
h1 {
  font-size: 30px
}
h2 {
  font-size: 20px;
}
ul {
 list-style-type: none; 
}
#header1, #header2 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
    margin: 0 0 10px 0;
}

#header1:hover, #header2:hover, #header1:active, #header2:active {
    background-color: #4CAF50;
    color: white;
}
.upper, .lower {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
    margin: 0 0 10px 0;
    padding: 10px 5px;
}

.upper:hover, .lower:hover {
    background-color: #008CBA;
    color: white;
}
#list {
    position: relative;
}
#button-list{
    width: 300px; 
}
#highlight{
 height: 500px;
 width: 500px;
}
#list-container{
  border: 2px solid white;
  padding:10px;
  height: 350px;
  width: 200px;
  position: relative;
  right: 0px;
}
#front-neck{
 left: 300px;
 position: relative;
 bottom: 400px;
}
#tasdf{
  height:85px;
  width: 200px;
}

JavaScript

var jsonString = {
  "stretches": [{
    "area": "front-neck",
    "name": "front-neck",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/fneck1.jpg",
    "type": "static"
  }, {
    "area": "back-neck",
    "name": "back-neck",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/IMG_1173.jpg",
    "type": "static"
  }, {
    "area": "side-neck",
    "name": "side-neck",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/sideNeck.jpg",
    "type": "static"
  }, {
    "area": "entire-neck",
    "name": "neck-rolls",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/neckRollStretch.jpg",
    "type": "dynamic"
  }, {
    "area": "trapezius",
    "name": "upper-trapezius",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/trapStretch3.jpg",
    "type": "static"
  }, {
    "area": "trapezius",
    "name": "lower-trapezius",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/trapStretch.jpg",
    "type": "static"
  }, {
    "area": "trapezius",
    "name": "trapezius",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/trapStretch2.jpg",
    "type": "dynamic"
  }, {
    "area": "shoulder",
    "name": "shoulder-raise",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/shoulderRaise.jpg",
    "type": "static"
  }, {
    "area": "shoulder",
    "name": "shoudler",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/IMG_1198.jpg",
    "type": "static"
  }, {
    "area": "shoulder",
    "name": "arm-circles",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/shoulderCircles.jpg",
    "type": "dynamic"
  }, {
    "area": "shoulder",
    "name": "elbow-circles",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/elbowCircles.jpg",
    "type": "dynamic"
  }, {
    "area": "shoulder",
    "name": "upward-shoulder",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/upwardShoulder.jpg",
    "type": "static"
  }, {
    "area": "triceps",
    "name": "tricep",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/tricepStretch.jpg",
    "type": "static"
  }, {
    "area": "triceps",
    "name": "tricep-side",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/tricepSideStretch.jpg",
    "type": "static"
  }, {
    "area": "biceps",
    "name": "standing-bicep",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/bicepStanding.jpg",
    "type": "static"
  }, {
    "area": "biceps",
    "name": "seated-bicep",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/bicepSeated.jpg",
    "type": "static"
  }, {
    "area": "biceps",
    "name": "bicep-side",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/bicepSide.jpg",
    "type": "static"
  }, {
    "area": "forearm",
    "name": "forearm-bench",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/forearmTable.jpg",
    "type": "static"
  }, {
    "area": "forearm",
    "name": "standing-forearm",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/forearmWall.jpg",
    "type": "static"
  }, {
    "area": "forearm",
    "name": "wrist-circles",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/wristCircles.jpg",
    "type": "dynamic"
  }, {
    "area": "it-band",
    "name": "seated-glute",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/seatedGlute.jpg",
    "type": "static"
  }, {
    "area": "it-band",
    "name": "ankle-to-knee",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/ankleToKneeGlute.jpg",
    "type": "static"
  }, {
    "area": "it-band",
    "name": "across-body",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/acrossBody.jpg",
    "type": "static"
  }, {
    "area": "it-band",
    "name": "leg-swings",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/legSwings.jpg",
    "type": "dynamic"
  }, {
    "area": "hamstring",
    "name": "leg-swings",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/legSwingsHam.jpg",
    "type": "dynamic"
  }, {
    "area": "hamstring",
    "name": "hamstring",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/hamstring.jpg",
    "type": "static"
  }, {
    "area": "hamstring",
    "name": "walking-kicks",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/hamstringWalking.jpg",
    "type": "dynamic"
  }, {
    "area": "hamstring",
    "name": "lying-hamstring",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/IMG_1217.jpg",
    "type": "static"
  }, {
    "area": "hamstring",
    "name": "leg-up-hamstring",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/legUpHamstring.jpg",
    "type": "dynamic"
  }, {
    "area": "calf",
    "name": "ankle-circles",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/ankleCircles.jpg",
    "type": "dynamic"
  }, {
    "area": "calf",
    "name": "calf-wall",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/wallCalf.jpg",
    "type": "static"
  }, {
    "area": "calf",
    "name": "seated-calf",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/seatedCalf.jpg",
    "type": "static"
  }, {
    "area": "calf",
    "name": "stair-calf",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/stairCalf.jpg",
    "type": "static"
  }, {
    "area": "adductor",
    "name": "butterly",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/butterflyAdductor.jpg",
    "type": "static"
  }, {
    "area": "adductor",
    "name": "standing-groin",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/standingAdductor.jpg",
    "type": "static"
  }, {
    "area": "adductor",
    "name": "leg-swings",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/legSwings.jpg",
    "type": "dynamic"
  }, {
    "area": "adductor",
    "name": "sumo",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/sumoAdductor.jpg",
    "type": "dynamic"
  }, {
    "area": "quadricep",
    "name": "kneeling-quadricep",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/kneelingQuad-1.jpg",
    "type": "static"
  }, {
    "area": "quadricep",
    "name": "lying-quadricep",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/lyingQuad.jpg",
    "type": "static"
  }, {
    "area": "quadricep",
    "name": "bench-quadricep",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/benchQuad.jpg",
    "type": "static"
  }, {
    "area": "quadricep",
    "name": "scorpion",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/scorpionQuad.jpg",
    "type": "dynamic"
  }, {
    "area": "quadricep",
    "name": "sitting-quadricep",
    "pic": "http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/sittingQuadricep.jpg",
    "type": "static"
  }]
}

$(function() {
 //THIS IS WHERE I INSERTED THE FUNCTION
  $("#anatomy-container img").hide();
  $('li').on("click,hover", "#button-list li", function() {
    imgClass = $(this).attr('id');
    $("#anatomy-container img").hide(); // hide all images
    $("#anatomy-container ." + imgClass).show(); //show only image that  
  });

  $("li.upper").hide();
  $("li.lower").hide();
  $("#header1").on('click', function() {
    $("li.upper").slideToggle();
    var buttonState = $("li#header1").attr("class");
    if (buttonState == "inactive") {
      $("li#header1").removeClass("inactive");
      $("li#header1").addClass("active");
      $(this).css({
        "background": "#4CAF50",
        "color": "white"
      });
    } else {
      $("li#header1").removeClass("active");
      $("li#header1").addClass("inactive");
      $(this).css({
        "background": "white",
        "color": "black"
      });
    }
  });
  $("#header2").click(function() {
    $("li.lower").slideToggle();
    var buttonState = $("li#header2").attr("class");
    if (buttonState == "inactive") {
      $("li#header2").removeClass("inactive");
      $("li#header2").addClass("active");
      $(this).css({
        "background": "#4CAF50",
        "color": "white"
      });
    } else {
      $("li#header2").removeClass("active");
      $("li#header2").addClass("inactive");
      $(this).css({
        "background": "white",
        "color": "black"
      });
    }
  });
  $("li.upper").on("click", function() {
    var buttonState = $(this).attr("class");
    if (buttonState == "upper inactive") {
      $(this).removeClass("upper inactive");
      $(this).addClass("upper active");
      $(this).css({
        "background": "#008CBA",
        "color": "white"
      });
    } else {
      $(this).removeClass("upper active");
      $(this).addClass("upper inactive");
      $(this).css({
        "background": "white",
        "color": "black"
      });
    }
  });
  $("li.lower").on("click", function() {
    var buttonState = $(this).attr("class");
    if (buttonState == "lower inactive") {
      $(this).removeClass("lower inactive");
      $(this).addClass("lower active");
      $(this).css({
        "background": "#008CBA",
        "color": "white"
      });
    } else {
      $(this).removeClass("lower active");
      $(this).addClass("lower inactive");
      $(this).css({
        "background": "white",
        "color": "black"
      });
    }
  });
  //THIS IS THE AREA I'M TRYING TO FIX!!!

  var myData = jsonString;
  var newContent = '';
  var selected = null;
  $('li').click(function(e) {
    e.preventDefault();
    selected = $(this).attr("id");
    newContent = "";

    /** Perhaps a quite different json structure could remove the for loop **/
    for (var i = 0; i < myData.stretches.length; i++) {
      if (selected == myData.stretches[i].area) {
        newContent += '<li id = "' + selected + '-img" class = "' + myData.stretches[i].area + '">';
        newContent += '<a href="' + myData.stretches[i].ref + '">'; /** ref is not defined in JSON **/
        newContent += '<img src="' + myData.stretches[i].pic + '">';
        //newContent += '<p "'+responseObject.stretches[i].name+'">';
        newContent += '</a> + </li>';
      }
    }
    console.log(newContent);
    $('#container').html(newContent);
  });
});
Improve this question
6
  • could you create a jsfiddle that reproduce the problem? Commented Jul 29, 2016 at 19:20
  • jsfiddle.net/RyeGuy/0m5xjmdm Commented Jul 29, 2016 at 19:24
  • sorry I dont understand what you are trying to achieve Commented Jul 29, 2016 at 19:35
  • Ok I changed the html and used css to display the functionality I would like. I would use this but I need two separate <div> containers for functionality down the road, but I do not know how to make it work using two <div> elements. jsfiddle.net/RyeGuy/0uf479s5 Commented Jul 29, 2016 at 19:50
  • you want to reproduce the hover effect using jquery instead of css? Commented Jul 29, 2016 at 19:58

1 Answer 1

Reset to default
1

You can do it easily with jQuery. As you describe in the question you have a list of buttons and image corresponding to that button.

$(function() {
    $(document).on("click", "#button-list li", function() {

        imgClass = $(this).attr('id');
        $("#anatomy-container img").hide(); // hide all images
        $("#anatomy-container ." + imgClass).show(); //show only image that class match with button id 

    });
    $(document).on("mouseover", "#button-list li", function() {

        imgClass = $(this).attr('id');
        $("#anatomy-container img").hide(); // hide all images
        $("#anatomy-container ." + imgClass).show(); //show only image that class match with button id 

    });
});

I hope this will help.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I like this solution. However when I insert into my code it does not function properly. Any suggestions? (Edited above)
Write separate event handler for click and mouseover and it will work fine. I have change my answer take a look.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.