hide/show div toggle cycle - html

Question

WHAT I HAVE:
3 buttons
when one is clicked it gets hidden and its corresponding box is shown
in each box is a link to close the box
when clicked the box hides
WHAT I NEED:
when the close link is clicked and the box closes, i need the button to be shown again
SUMMARY:
button click toggles button hide / box show, close click toggles box hide / button show
current code

Answer 1

you just needed to add $('.showSingle').removeClass('selected'); to the $('.hide').click() function and add a return false at the end of it so that the link's href doesnt get called (putting the # in the url) I also rewrote the first click event so that its consistent with the second.
$(function(){
$('.showSingle').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
$('.targetDiv').hide();
$('#div' + $(this).data('target')).show();
});
$('.hide').click(function() {
$('.targetDiv').hide();
$('.showSingle').removeClass('selected');
return false;
});
});

Answer 2

When you click on each button you have a call that adds the class 'selected' to the button pressed and removes the same from all other buttons. This class is making the button hidden. What you need to do then is when the close link is pressed, remove the class from all buttons.
$('.hide').click(function() {
$('.targetDiv').hide();
$('.showSingle').removeClass('selected');
});

Answer 3

Try this.
$(window).load(function(){
$('.showSingle').on('click', function () {
$(this).addClass('selected').siblings().removeClass('selected');
$('.targetDiv').hide();
var srcId = $(this).data('target');
$('#div' + srcId).show();
$('.targetDiv').click(function(){
$('.targetDiv').hide();
$(".showSingle[data-target='" +srcId +"']").show();
});
});

Answer 4

Here's a code that work with your current HTML. It comes with two options, hide the button text or hide the button itself. Also as a side note, if you use on() keep using it--don't switch to .click()
JSFiddle Demo
$(function() {
$('.targetDiv').hide(); //Start off with boxes hidden
$('.showSingle').on('click', function() { //Link clicked
$('.targetDiv').hide(); //Hide any open boxes
$('.selected').removeClass('selected'); //Show all buttons
//$(this).children('div').addClass('selected'); //Hide button text
$(this).addClass('selected'); //Hide button box
var id = $(this).data('target'); //Get desired target
$('#div'+id).show(); //Show target box
return false; //Stop link from going anywhere
});
$('.hide').on('click', function() {
$('.targetDiv').hide(); //Hide any open boxes
$('.selected').removeClass('selected'); //Show all buttons
return false; //Stop link from going anywhere
});
});​