Toggling between different displays

Switching between different displays for one item, and other items

[itledi]

I have a list, and next to each item are two options, to tag or to talk.

If the user clicks on either of these, a section of the list that had its display set to none using css now gets displayed as a block, showing the contents.

I’m close to getting my code there, but I still have some issues with it, and I was hoping somebody might be able to give me a hand.
I need the code so if the user clicks on tag, then the item’s box displays, with the tag content. If the user clicks on tag again, the box hides. If a user clicks on talk, the item’s box displays, with the talk content. If the user clicks on talk again, the box hides.
If the user already has an item’s tag box open, and the user clicks talk, the tag box needs to close, and the talk box needs to open. The opposite should happen if the user clicks on talk if the tag box is already open.

If the user has a box open for one item, but clicks on another item’s talk or tag, then the first item needs to close, and the second item’s appropriate box needs to open.

Any help would be much appreciated.

Thanks

var ajax="off";
var ajax_old="";
var ajax_active="";
var ajax_type="";

function talk(hash){
if(ajax=="off"){
document.getElementById("ajax-"+hash).innerHTML="<div>Talk</div>";
document.getElementById("ajax-"+hash).style.display="block";
ajax="on";
ajax_active=hash;
ajax_type="talk";
}
else if(ajax_active==hash && ajax_type=="talk"){
document.getElementById("ajax-"+hash).style.display="none";
document.getElementById("ajax-"+hash).innerHTML="";
ajax="off";
ajax_active="";
ajax_type="";}
else if(ajax_type=="talk"){
ajax_old=ajax_active;
document.getElementById("ajax-"+ajax_old).style.display="none";
document.getElementById("ajax-"+ajax_old).innerHTML="";
document.getElementById("ajax-"+hash).innerHTML="<div>Talk</div>";
document.getElementById("ajax-"+hash).style.display="block";
ajax_active=hash;}
else if(ajax_active==hash){}
else tag(hash);
return false;
}

function tag(hash){
if(ajax=="off"){
document.getElementById("ajax-"+hash).innerHTML="<div>Tag</div>";
document.getElementById("ajax-"+hash).style.display="block";
ajax="on";
ajax_active=hash;
ajax_type="tag";}
else if(ajax_active==hash && ajax_type=="tag"){
document.getElementById("ajax-"+hash).style.display="none";
document.getElementById("ajax-"+hash).innerHTML="";
ajax="off";
ajax_active="";
ajax_type="";}
else if(ajax_type=="tag"){
ajax_old=ajax_active;
document.getElementById("ajax-"+ajax_old).style.display="none";
document.getElementById("ajax-"+ajax_old).innerHTML="";
document.getElementById("ajax-"+hash).innerHTML="<div>Tag</div>";
document.getElementById("ajax-"+hash).style.display="block";
ajax_active=hash;}
else if(ajax_active==hash){}
else talk(hash);
return false;
}

[gergoe]

And what is the problem with this piece of code (besides that it is redundant)? From reviewing it, I can tell you that if you click on the Tag or Talk buttons of the same Item, then they will get switched from one to the another, because that case is not covered by the mass of if conditions you've done. The conditions are doing the following:

1. If nothing is active, show the requested one
   
2. If the requested one is already shown with the same type, hide it
   
3. If the same type needs to be shown as it is displayed already (but with different hash), switch to that one
   
4. If the same Item needs to be displayed but not from the same type, then do nothing. The above conditions already handled all situations where the type is the same, and the situation where the type and the hash is the same, the only one remaining is the situation where the hash is the same, but the type is different, and that's the situation when this condition evaluates to true.
   
5. Because of the above condition, this never evaluates to be true!

To correct this behavior, simply remove the

else if(ajax_active==hash){}

condition from both functions.

Besides of this, to get rid of the redundant code, make a common function, which does not have the 'tag' and 'talk' texts hard-coded in them, instead turn them into a variable, and wrap it up into a new function. Of course I do not see your intentions with his code, and the actual goal with the Tag and Talk texts placed in the div's, so it might not be as straightforward as I can see it from this piece of code. But it is worth of considering anyway.

[itledi]

Thank you for your reply.

That code is needed if hash 1 had a tag open, but you click on the talk of hash 2. The instead of opening the talk of hash 2, it would open the tag. I knew something was needed inside, I just couldn't figure out what it was.

Tinkering around with it though, I did realize what I needed to do.

var ajax_old="";
var ajax_active="";
var ajax_type="";

function talk(hash){
if(ajax=="off"){
document.getElementById("ajax-"+hash).innerHTML="<div>Talk</div>";
document.getElementById("ajax-"+hash).style.display="block";
ajax="on";
ajax_active=hash;
ajax_type="talk";
}
else if(ajax_active==hash && ajax_type=="talk"){
document.getElementById("ajax-"+hash).style.display="none";
document.getElementById("ajax-"+hash).innerHTML="";
ajax="off";
ajax_active="";
ajax_type="";}
else if(ajax_active==hash){
document.getElementById("ajax-"+hash).innerHTML="<div>Talk</div>";
ajax_type="talk";}
else{
ajax_old=ajax_active;
document.getElementById("ajax-"+ajax_old).style.display="none";
document.getElementById("ajax-"+ajax_old).innerHTML="";
document.getElementById("ajax-"+hash).innerHTML="<div>Talk</div>";
document.getElementById("ajax-"+hash).style.display="block";
ajax_active=hash;}
return false;}

function tag(hash){
if(ajax=="off"){
document.getElementById("ajax-"+hash).innerHTML="<div>Tag</div>";
document.getElementById("ajax-"+hash).style.display="block";
ajax="on";
ajax_active=hash;
ajax_type="tag";}
else if(ajax_active==hash && ajax_type=="tag"){
document.getElementById("ajax-"+hash).style.display="none";
document.getElementById("ajax-"+hash).innerHTML="";
ajax="off";
ajax_active="";
ajax_type="";}
else if(ajax_active==hash){
document.getElementById("ajax-"+hash).innerHTML="<div>Tag</div>";
ajax_type="tag";}
else{
ajax_old=ajax_active;
document.getElementById("ajax-"+ajax_old).style.display="none";
document.getElementById("ajax-"+ajax_old).innerHTML="";
document.getElementById("ajax-"+hash).innerHTML="<div>Tag</div>";
document.getElementById("ajax-"+hash).style.display="block";
ajax_active=hash;}
return false;}

Now I just need to go through and take out all the redundant code. Thanks for your help!

[itledi]

Viola!

var ajax_active, ajax_type;

function off(hash){
document.getElementById("ajax-"+hash).style.display="none";
document.getElementById("ajax-"+hash).innerHTML="";
ajax_active="";
ajax_type="";}

function on(type,hash){
if(type=="tag") document.getElementById("ajax-"+hash).innerHTML="...";
if(type=="talk") document.getElementById("ajax-"+hash).innerHTML="...";
document.getElementById("ajax-"+hash).style.display="block";
ajax_active=hash;
ajax_type=type;}

function toggle(type,hash){
if(ajax_active=="") on(type,hash);
else if(ajax_active==hash && ajax_type==type) off(hash);
else{off(ajax_active);on(type,hash);}
return false;}

Thanks again for your help!

[gergoe]

Good job. Time to look into JavaScript Objects and Prototype, that would make it look even better :-)