Show Hide Div Dependent on Get ['status'] - php

Question

Hopefully someone will know how to do this...
I would like the show/hide to work dependent on the the image/icon clicked.
For example if Request Icon is clicked, the colorbox popup will be displaying the Request and Offered divs.
Whereas if the Accepted Icon is clicked, the colorbox popup will display Accepted and Offered Divs but hides the Request div.
Here's a few in the PHP:
<div <?php if($_GET['status']=="Requested"){ echo "class=iconActive";}else {echo "class=iconInactive";}?>>
<a href="/index.php/agent-appointment-request-list/?status=Requested">
<img src="components/com_agent/images/requestedIcon_s1.png" id="requestedIcon" alt="" /></a>
<div class="iconTitle">Requested</div>
</div>
Here's the jquery for show/hide that I have:
$(".slidingDivReq").show();
$("#show_hideReq").show();
$('#show_hideReq').click(function(){
$(".slidingDivReq").slideToggle();
});
Update: Here's the section for the content that'll be show/hidden. :
<div class="AppointmentTitleFirst">
<img src="components/com_agent/images/req_appt_title_s1.png" class="ApptIcon"></img>
<h1>Requested Appointment # <?php echo $this->appointment->id;?> Status:<?php echo $this->appointment->status_name;?></h1>
<img src="components/com_agent/images/dropdown_arrow_s1.png" class="ApptDropDownArrow1" id="show_hideReq"></img>
</div>
<div class="clearFloat"></div>
<div id="requestedAppointmentContent" class="slidingDivReq">
Content here....
</div>
Pretty much, I'm not sure how to use the GET['status'] and use it with the show/hide. So if the GET['status'] == Requested, then the show_hideReq will be .show(), but my other divs in the colorbox will use .hide(); (unless it's a page that needs a few other divs to .show())
Hopefully someone will know.

Answer 1

I'm not sure how to use the GET['status'] and use it with the
show/hide
You can use a hidden element as a variable, sothat you can test your GET['status'] in jquery. Add this element in your php page:
<input type="hidden" id="StatusId" value="<?php echo GET['status']; ?>"/>
Then you can do this:
$('#div').click(function(){
var statusId = $("#StatusId").val();
If( statusId === 0){
//Do something
}else{
// Do something elese
}
});
You should send the status value in the url that redirect to this php page, for example from js file it would look like:
var url = "http://localhost/yourcurrentphpfile.php?Status=" + somevalue;
window.location.href = url;
or the clicked <a> tag in your php page that redirect to this page should has the href property looks like http://localhost/yourcurrentphpfile.php?Status=somevalue.
yourcurrentphpfile.php is the php page that containst the hidden input.

Answer 2

You'd better use $(element).css("dissplay","none"); to hide an element and $(element).css("dissplay","inherit"); to show it.
Also in your PHP you better use if (isset($_GET['status']) && !empty($_GET['status'])) to ensure you have a value. Also, you need to edit your ECHO instructions to:
echo 'class = "iconActive"';
and
echo 'class = "iconInactive"';
Following your code's logic,
$(function(){ //on page load
$("div.classActive").load(function(){
//Do whatever you want when the div is active such as show/hide elements
})
$("div.classInactive").load(function(){
//Do whatever you want when the div is inactive such as show/hide elements
})
})
Only of the 2 will be executed since when a page renders only one of them will exist.