i have two product categories which customer can preview when click,
and wish to show a message on each item. Ive found a nice script but
need help to make this in 2 sets. need help. Happy new year!

<!DOCTYPE html>
<html lang="en">
<title>Untitled Document</title>

<script type="text/javascript">

var current = null;

function showresponddiv(messagedivid){
    var id = messagedivid.replace("message-", "respond-"),
        div = document.getElementById(id);

    // hide previous one
    if(current && current != div) {
        current.style.display =  'none';
    }   

    if (div.style.display=="none"){
        div.style.display="inline";
        current = div;
    } 
    else {
        div.style.display="none";
    }
}
</script> 




<style type="text/css">
.box li { cursor:pointer; }
#banks .active { color:red; }
#buttons .active { color:blue; }
</style>



</head>

<body>
<div id="message-1" onclick="showresponddiv(this.id)">Set1 a
</div>
<div id="respond-1" style="display:none;">Bar1
</div>
<div id="message-2" onclick="showresponddiv(this.id)">Set1 b
</div>
<div id="respond-2" style="display:none;">Bar2
</div>

<div id="message-3" onclick="showresponddiv(this.id)">Set1 c
</div>
<div id="respond-3" style="display:none;">Bar3
</div>






</body>

</script> 
</html>

Hi Julia.

Why would the current script not work for two categories?

As long as the ids of the divs' are unique and follow the same naming rules ("message-n" and "respond-n"), then everything should work.

Unless I'm missing something, categorisation should just be a question of layout - eg category A divs will be in a different container from category B divs - and the click handler will be showresponddiv() in both cases.

Hello A! Nice to hear from you again :)
Yes ive tried but seem not working?

you've tried ... what is it you've tried, exactly?

<input type="button" value="Click Me" onclick="alert('Message')" />

Julia, if you post your 2-category HTML, I'll see if I can advise.

basically the project is layered images.Set 1 Shirt and Set 2 Pants which has each own thumbnails which customers can mix and match. the idea of the script is for the thumbnail
when click, it will show the brand and the style on each set

OK, I'm guessing here - you have a bunch of shirt thumbnails and a bunch of pant thumbnails displayed on the page. When a shirt is cliked, you want to display some descriptive text in a "shirts details" area. When a pant is cliked, you want to display some descriptive text in a "pant details" area, ie there's one details area per set, not one per item? That would make sense, but is it what you want?

Julia, for the text, I can see no reason why the code above shouldn't work. You will need additional code to change the images.

everything is working, except for the thumbnail to show text when clicked.Though its difficult to position the text under the thumbnail. can you suggest a better script for this?

Im also trying this method using tooltip which i change the mouseover to click but wish the description will not leave until clicking on the other thumbnail.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mix and Match</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>


<style type="text/css">

#SET1 {
    height: 150px;
    width: 350px;
    text-align: left;
    background-color: #FFC;
    float: left;
}
#SET2 {
    height: 150px;
    width: 350px;
    text-align: left;
    background-color: #FCC;
    float: left;
    margin-left: 15px;
}
.tiptext2 {
    background:#ccc;
    border: 1px #333 solid;
    padding:5px;
    width:100px;
    float:left;
    display: block;
    margin: 15px;
}
.txt {
    text-align: center;
    width: 350px;
    display: block;
}
.description {
    display:none;
    position:absolute;
    border:1px solid #000;
    margin-top: 10px;
    margin-left: -10px;
}
#ff {
    background:#ccc;
    border: 1px #333 solid;
    padding:5px;
    width:100px;
    float:left;
    display: block;
    margin: 15px;
    }
    #ff2 {
    border: 1px #333 solid;
    padding:5px;
    width:100px;
    float:left;
    display: block;
    margin: 15px;
    background-color: #CCF;
    }
    #ff3 {
    border: 1px #333 solid;
    padding:5px;
    width:100px;
    float:left;
    display: block;
    margin: 15px;
    background-color: #FCF;
    }

        #SS1 {
    border: 1px #333 solid;
    padding:5px;
    width:100px;
    float:left;
    display: block;
    margin: 15px;
    background-color: #9CF;
    }
    #SS2 {
    border: 1px #333 solid;
    padding:5px;
    width:100px;
    float:left;
    display: block;
    margin: 15px;
    background-color: #9CC;
    }
    #SS3 {
    border: 1px #333 solid;
    padding:5px;
    width:100px;
    float:left;
    display: block;
    margin: 15px;
    background-color: #CF3;
    }
</style>
</head>

<body>
 <div id="SET1">
<span class="txt">SET 1</span>
<div class="tiptext" id="ff">Text
  <div class="description">Armani</div>
</div>

<div class="tiptext" id="ff2">Text
<div class="description">Guess</div>
</div>

<div class="tiptext" id="ff3">Text
<div class="description">versace</div>
</div>
</div>


<div id="SET2">
<span class="txt">SET 2</span>
<div class="tiptext" id="SS1">Text
  <div class="description">Levis</div>
</div>

<div class="tiptext" id="SS2">Text
<div class="description">McGree</div>
</div>

<div class="tiptext" id="SS3">Text
<div class="description">Blue Navy</div>
</div>
</div>



<script type="text/javascript">
$(".tiptext").click(function() {
    $(this).children(".description").show();
}).mouseout(function() {
    $(this).children(".description").hide();
});
  </script>
</body>
</html>

Julia,

Aha, jQuery - much easier.

If I understand correctly, you want something like this - http://jsfiddle.net/L54vH/1/ . I changed the script but left the HTML and CSS alone.

var $current = $();
$(".tiptext").on('click', function() {
    $current.hide();
    $current = $(this).children(".description").show();
});

The CSS can be simplified by defining a .tiptext directive.

wow! great! is it possible to separate the function within each set? I mean when clicking a thumbnail in Set2, Selected element in Set1 should remain (not hide). vice versa

Julia,

First give your set wrappers the class name "set" :

<div class="set" id="SET1">
    ...
</div>
<div class="set" id="SET2">
    ....
</div>

Then use the following glorious seven-method one line jQuery event handler :

$(".tiptext").on('click', function () {
    $(this).closest(".set").find(".description").hide().end().end().children(".description").show();
});
commented: Genius! +2

Yes! It works! Thanks a lot Mr. A!

Julia, I forgot to post a link to the updated fiddle - but you got it working anyway - cool!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.