CODEWITHSUNDEEP
javascriptjqueryhtmlcss
A Kel
A Kel

Reputation: 75

set Image visible/hidden in div on click

I implmented some code from diffrent post on here the code works in js fiddle but not locally any help is greatly appreciated

I know there are paragrapgh and not images below but this is just for testing first

Thanks

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
         <title>DY Fitness</title>
         <script src="imagesel.js" type="text/javascript"></script>
    </head>
    <body>

        <img id="imga" src="http://www.placekitten.com/100/100" />
        <img id="imgb" src="http://www.placekitten.com/100/100" />
        <img id="imgc" src="http://www.placekitten.com/100/100" />
        <div id="show" style=" visibility:hidden;">
          <p id="showa">AAA</p>
          <p id="showb">BBB</p>
          <p id="showc">CCC</p>
</div>
    </body>
</html>

JS code imagesel.js

 $(document).ready(function() {
$('#imga').click(function() {
  $('#showa').css('visibility', ($('#showa').css('visibility') == 'visible') ? 'hidden' : 'visible');
  $('#showb').css('visibility', ($('#showb').css('visibility') == 'visible') ? 'hidden' : 'hidden');
  $('#showc').css('visibility', ($('#showc').css('visibility') == 'visible') ? 'hidden' : 'hidden');
})
 $('#imgb').click(function() {
    $('#showb').css('visibility', ($('#showb').css('visibility') == 'visible') ? 'hidden' : 'visible');
    $('#showa').css('visibility', ($('#showa').css('visibility') == 'visible') ? 'hidden' : 'hidden');
    $('#showc').css('visibility', ($('#showc').css('visibility') == 'visible') ? 'hidden' : 'hidden');
 })
  $('#imgc').click(function() {
    $('#showc').css('visibility', ($('#showc').css('visibility') == 'visible') ? 'hidden' : 'visible');
    $('#showb').css('visibility', ($('#showb').css('visibility') == 'visible') ? 'hidden' : 'hidden');
    $('#showa').css('visibility', ($('#showa').css('visibility') == 'visible') ? 'hidden' : 'hidden');
    });
});

Upvotes: 0

Views: 2045

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 205997

Your code is not working cause you're missing jQuery

Add jQuery and volia http://jsbin.com/yumiqu/edit?html,css,js,output

By just adding a class .invisible to your CSS:

.invisible{
  visibility:hidden;
}

and assigning that class to your child elements instead:

<img id="imga" src="http://www.placekitten.com/100/100" />
<img id="imgb" src="http://www.placekitten.com/100/100" />
<img id="imgc" src="http://www.placekitten.com/100/100" />
<div id="show">
  <p class="invisible" id="showa">AAA</p>
  <p class="invisible" id="showb">BBB</p>
  <p class="invisible" id="showc">CCC</p>
</div>

this is all you need (wrapped in DOm ready ofc):
http://jsbin.com/yumiqu/1/edit?html,css,js,console,output

$('[id^=img]').click(function() {
  var $target = $("#show"+ this.id.split("img")[1]);    // $(#show+ a, b, c...)
  $("[id^=show]").not( $target ).addClass("invisible"); // Remove from all
  $target.toggleClass("invisible");                     // add to target el.
});

Upvotes: 0

Gregg Duncan
Gregg Duncan

Reputation: 2725

As mentioned in the comments your problem is most likely that you didn't load the jquery library. But that is a horrible way to do what you are trying to do. It could be done much more simply like this:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
         <title>DY Fitness</title>
         <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
         <script src="imagesel.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- note that I added 'data-show' attributes with the id of the element to show -->
        <img id="imga" src="http://www.placekitten.com/100/100" data-show="showa" />
        <img id="imgb" src="http://www.placekitten.com/100/100" data-show="showb" />
        <img id="imgc" src="http://www.placekitten.com/100/100" data-show="showc" />
        <div id="show" style="visibility:hidden;">
          <p id="showa">AAA</p>
          <p id="showb">BBB</p>
          <p id="showc">CCC</p>
</div>
    </body>
</html>

Then your javascript would look like this:

$(function(){
     $('img').click(function(){ // when an image is clicked
        var id = $(this).data('show'); // get the value of the data-show attribute
        $('#show > p').css('visibility', 'hidden'); // hide all of the p inside #show
        $('#' + id).css('visibility', 'visible'); // display the specific p
        $('#show').css('visibility', 'visible'); // show the div holding your p items.
    });
});

Using data attributes is a great way to pass data to click handlers.

Upvotes: 1

Related Questions