CODEWITHSUNDEEP
javascriptjquery
robpal
robpal

Reputation: 834

jquery show hide

look I have this question, how can i do something like this (look at images)

I think it's possible to do with jQuery or ajax, but i don't know how..

  1. i have page something like this : enter image description here
  2. when i click on 1st green cube slides up one #div container at the bottom of page : enter image description here
  3. when i click on red 1st cude #div container at the bottom of page slides down : enter image description here
  4. but when i click for example (on image 2) at the green cube #div container at the bottom slides down and up with new information abou title 2.

I hope so you will help me with this..

And one more thing, when i click o green cube it color chancing to red, and when i click on red cube it's changes back to green.

Upvotes: 1

Views: 577

Answers (2)

nicosantangelo
nicosantangelo

Reputation: 13736

I don't know if this is exactly what you need, but I did a quick solution in this fiddle:

http://jsfiddle.net/8Z66Y/3/

If you click in the squares the bottom bar slides up and down, the only thing that is missing is the text, you could do that using the data attribute in every div and setting it to the bar innerHTML.

If the example is in the right track tell me and I'll add the data if you need it, but I don't know if you need to retrieve the data from somewhere else

Upvotes: 2

Tusk
Tusk

Reputation: 723

You just have to write in the second green's jquery code that hide first green's bar, and do the opposite for the first green's jquery code.

like:

$("first").click(function(){
    $("second").hide();
    $("first").toggle();
});
$("second").click(function(){
    $("first").hide();
    $("second").toggle();
});

Upvotes: 0

Related Questions