Link to home
Start Free TrialLog in
Avatar of Pdesignz
PdesignzFlag for United States of America

asked on

Jquery help show/hide div content based on image

I am newbie to jquery, but I would like to have a div or div content display based on a icon or image selected. I would have 6 icons or images and based on the icon/image selected the div or content would display that relates to that icon/image. If possible to have a left and right arrow to cycle to content that would be great as well.

Here are two examples that I found and I like to reference...Thanks

https://www.bluefountainmedia.com/website-design (Section Labeled Web Design Process)
https://www.digitalhill.com/?a=what-we-do (Section Labeled Need Real Web Solutions)
ASKER CERTIFIED SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Pdesignz

ASKER

Great! How can it be set so that tab1 is displayed by default on page load so that an empty div is not displayed before any image is selected. Thanks
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Great work!! Thanks
Would it be possible to have different images as the selected state image?
example tab1 has image 1, tab2 has image 2 for both image and selected state...thanks
use images like tab_1_on.png / tab_1_off.png (start with 0 for first image)

then use this

var preIndex = 0;
$("#divNavigate .imgNav").click(function() {
  var ix = $("#divNavigate .imgNav").index($(this));
  console.log(ix);
  $("#divNavigate .imgNav:eq('" + preIndex + "')").removeClass("selected");
  $(this).toggleClass("selected");
  $("#divContent .tab:eq('" + preIndex + "')").hide();
  $("#divContent .tab:eq('" + ix + "')").show();
  $("#divNavigate .imgNav").attrb("src","tab_"+ix+"_on.png");
  $("#divNavigate .imgNav").attrb("src","tab_"+preIndex+"_off.png");
  preIndex = ix;
});

Open in new window


see, I am changing selected image as "tab_x_on.png" and previous selected one to "tab_p_off.png"
Line 9-10 added to current solution... I cannot test this since we need images ready and hosted on web server :)
Great! Thanks for the help...Let me try the images and see. So the 1st image or image 0 would that be tab_0_on or tab_0_off for the default selected state. Then I assume it would be _on for the select state and _off for the non selected state. Is it also possible to add title for the image that changes color on the select state or should I make the title be part of the image...Thanks!
default values "tab_X_off.png" and X will start from 0

<div id=divNavigate>
  <img class="imgNav" src="tab_0_off.png">
  <img class="imgNav" src="tab_1_off.png">
  <img class="imgNav" src="tab_2_off.png">
  <img class="imgNav" src="tab_3_off.png">
  <img class="imgNav" src="tab_4_off.png">
  <img class="imgNav" src="tab_5_off.png">
</div>

Open in new window


there is no title involved here :)
here is extended demo :)

https://jsfiddle.net/sfLez4u8/

added some visual styling, margin/padding/text etc...
I tested this solution with images that I created and are hosted and it is not working. On default I have it setup where tab_0_on.png is loaded and the rest of the images use the tab_x_off.png images. When I click the other images, the images do not change from the _off to the _on state. Also when I click the images the content is loaded below the images, but additional content is loaded, so if I click 2,3,4 the content for 2,3,4 would be loaded and not switch between 2,3,4 as it was before... I also removed the reference to the .selected as I did not need this for now...

Here is the script I am using...

<script type="text/javascript">
            var preIndex = 0;
$("#divNavigate .imgNav").click(function() {
  var ix = $("#divNavigate .imgNav").index($(this));
  console.log(ix);
  $("#divContent .tab:eq('" + preIndex + "')").hide();
  $("#divContent .tab:eq('" + ix + "')").show();
  $("#divNavigate .imgNav").attrb("src","tab_"+ix+"_on.png");
  $("#divNavigate .imgNav").attrb("src","tab_"+preIndex+"_off.png");
  preIndex = ix;
});

$("#divNavigate .imgNav:eq(0)").click();

        
        </script>

Open in new window


To reference the images you can go to http://www.dev.pdesignz.com/images/tab_x_on.png/

To see a working example you can go here and see the issues...

http://www.dev.pdesignz.com/web-design-development.html

Thanks!!
try

  $("#divNavigate .imgNav:eq("+ix+")").attr("src","tab_"+ix+"_on.png");
  $("#divNavigate .imgNav:eq("+preIndex+")").attr("src","tab_"+preIndex+"_off.png");

Open in new window

Would this be correct, using what you just said to add...

<script type="text/javascript">
            var preIndex = 0;
$("#divNavigate .imgNav").click(function() {
  var ix = $("#divNavigate .imgNav").index($(this));
  console.log(ix);
  $("#divContent .tab:eq('" + preIndex + "')").hide();
  $("#divContent .tab:eq('" + ix + "')").show();
  $("#divNavigate .imgNav:eq("+ix+")").attr("src","tab_"+ix+"_on.png");
  $("#divNavigate .imgNav:eq("+preIndex+")").attr("src","tab_"+preIndex+"_off.png");
  preIndex = ix;
});

$("#divNavigate .imgNav:eq(0)").click();

        
        </script>

Open in new window


When I do this the content changes, but the images are then hidden as I assume would now be the selected images but they are not displayed. Also on load the default selected image is also hidden by default, shows for about a second but then it hidden
:) you need to use same path...
looks like you are missing images

  $("#divNavigate .imgNav:eq("+ix+")").attr("src","/images/tab_"+ix+"_on.png");
  $("#divNavigate .imgNav:eq("+preIndex+")").attr("src","/images/tab_"+preIndex+"_off.png");

Open in new window

<img class="imgNav" src="/images/tab_0_off.png">

Open in new window


>>>

<img class="imgNav" src="images/tab_0_off.png">

Open in new window


also, we need to check preindex initially...

var preIndex;
$("#divNavigate .imgNav").click(function() {
  var ix = $("#divNavigate .imgNav").index($(this));
  console.log(ix);
  $("#divContent .tab:eq('" + preIndex + "')").hide();
  $("#divContent .tab:eq('" + ix + "')").show();
  $("#divNavigate .imgNav:eq("+ix+")").attr("src","images/tab_"+ix+"_on.png");
  if (preIndex) $("#divNavigate .imgNav:eq("+preIndex+")").attr("src","images/tab_"+preIndex+"_off.png");
  preIndex = ix;
});

$("#divNavigate .imgNav:eq(0)").click();

Open in new window


or just reverse off on

  $("#divNavigate .imgNav:eq("+preIndex+")").attr("src","images/tab_"+preIndex+"_off.png");
  $("#divNavigate .imgNav:eq("+ix+")").attr("src","images/tab_"+ix+"_on.png");

Open in new window

Images were on server, but the last change you did fixed everything all working...If I want to add the images into a list item (ul) so that I can add spacing or center would this still work?
no it is not working as expected... fix that one first...

use this one

$("#divNavigate .imgNav:eq("+preIndex+")").attr("src","images/tab_"+preIndex+"_off.png");
$("#divNavigate .imgNav:eq("+ix+")").attr("src","images/tab_"+ix+"_on.png");

Open in new window


ie reverse these lines... right now first image is off, then on, then off initially, which we dont want it...
just use

.imgNav {
    cursor: pointer;
    padding: 40px;
}

Open in new window


or

.imgNav {
    cursor: pointer;
    padding-right: 30px;
    padding-left: 30px;
}

#divNavigate{
  padding-bottom:30px;
}

Open in new window


or any combination :)
or put them in a table like

<table class="cebteredTable" style="width:100%">
<tr>
<td><img ...></td>
...
<td><img ...></td>
</tr>
</table>

Open in new window


.centeredTable td {
  text-align:center;
}

Open in new window

or best choice imo:

just use these css:

.imgNav {
    cursor: pointer;
    padding-right: 30px;
    padding-left: 30px;
}

#divNavigate{
    padding-bottom: 40px;
    padding-top: 30px;
    text-align: center;
}

Open in new window


adjust numbers as you wish... make sure left and right paddings are same for .imgNav

result

User generated image
Great will give it a shot thanks! If I wanted to have a 3rd image for say the hover state, is that possible and how would I do that . I am thinking that if I add this, people would then see that the images are clickable as I am not sure they would figure that out in it's current state...thanks!
then you need "tab_x_hov.png" and need to write 2 functions
one for mouse in one for mouse out
or with jQuery

$( "#divNavigate .imgNav" ).hover(
  function() { // hover in
    // change img to "tab_x_hov.png"
  }, function() { // hove out
    // restore image somehow :)
  }
);

Open in new window

Not sure how to write the function or how I would do this...If you need I can post another question so you can get rewarded for the help you are providing...
sure
Ok will that..