Question

So I’m experiencing problem – I got a function, when someone clicks a menu, it will show a div tag. See here –

$("a#cat").click(function() {
  $("div#categoryBox").show();
  return false;
});

So far everything works great, the div content shows up excellent, but the problem is that inside div content there are buttons (a tags), delete and edit, when I click one of these buttons, the div tag hides. The button links are –

<a href="?action=edit&id=<?php echo $id; ?>"> and <a href="?action=delete&id=<?php echo $id; ?>">

If I press one of these links, the div content automatically hides, and I need to press again the a button with id #cat. Is there any way to make it stay, unless I press different menu link or refresh page?

If you need any additional information, please ask.

Answer 1

There are several ways to do this. Perhaps the easiest is to re-show the div when the page loads if certain conditions are met.

If you want to display the div every time the url is ?action=edit or ?action=delete, use this:

$(function () {
    if (/\baction=(edit|delete)\b/.test(location.search)) {
        $("div#categoryBox").show();
    }
});

Or, you could append a hash parameter when you want to show the div:

<a href="?action=edit&id=<?php echo $id; ?>#showCategoryBox">edit</a>
<a href="?action=delete&id=<?php echo $id; ?>#showCategoryBox">delete</a>

$(function () {
    if (location.hash === "#showCategoryBox") {
        $("div#categoryBox").show();
    }
});