Загрузка / переключение DIV путем вызова уникальных функций (на странице WordPress)

Question

Я больше разбираюсь в HTML / CSS, и хотя я немного знаком с базовым Javascript, я не уверен, как кодировать то, что я хотел бы видеть. Я пытаюсь сделать это на странице WordPress.

Это страница, которая показывает предстоящие события для определенной провинции / региона Канады и имеет интерактивную карту вверху.

Когда пользователь нажимает на определенную провинцию на карте, он вызывает функцию, которая загружает уникальный DIV и его содержимое в другой «контейнерный» DIV (чтобы весь контент загружался в одном месте). Все DIV для каждой провинции / региона находятся на одной странице, поскольку WordPress установлен в корневом каталоге и не допускает ссылки на страницы (в пределах одного домена), кроме тех, которые он создает.

    <div id="map">
    </div>


 <div id="scheduleBox">
// content will be loaded here 
    </div>

<!-- ==== DIV FOR BC EVENTS ===== -->
    <div id="bc">
    <div class="schedule_header">
    <h2>Upcoming Events for British Columbia</h2>
    </div>
    <table>
    <tbody>
    <tr><!-- TABLE HEADERS -->
    <td class="tableheader">Date</td>
    <td class="tableheader">Time</td>
    <td class="tableheader">City</td>
    <td class="tableheader">Venue</td>
    </tr>
    <tr><!-- EVENT #1 -->
    <td class="date">August 01, 2011</td>
    <td class="time">12:00 AM</td>
    <td class="city">Kelowna, BC</td>
    <td class="venue">Venue Name Here</td>
    </tr>
    <tr><!-- EVENT #2 -->
    <td class="date">August 01, 2011</td>
    <td class="time">12:00 AM</td>
    <td class="city">Kelowna, BC</td>
    <td class="venue">Venue Name Here</td>
    </tr>
    <tr>
    <td class="date">August 01, 2011</td>
    <td class="time">12:00 AM</td>
    <td class="city">Kelowna, BC</td>
    <td class="venue">Venue Name Here</td>
    </tr>
    </tbody>
    </table>
    </div>

 // Event listings for Alberta //

    <div id="ab">
    <div class="schedule_header">
    <h2>Upcoming Events for Alberta</h2>
    ....
    ...
    </div>
    </div>

Из-за ограничений WordPress, когда пользователь нажимает на другую провинцию, ранее отображаемый контент заменяется новым контентом без ссылки на URL-адрес или HTML-страницу. Он просто захватывает контент, ссылаясь на идентификатор DIV и загружая в него все.

Я пытался использовать функции jQuery append и AJAX для переключения DIV, но, похоже, ничего не работает. Я также посмотрел учебники, которые переключают DIV, но они опираются на внешние страницы.

Итак, я в растерянности. Ниже приведен псевдокод, который показывает картину того, что я хотел бы случиться:

function loadbc() {    // function that loads events for British Columbia
#scheduleBox.hide;      // clear content from the container div if there is any.
#scheduleBox.show;
findDiv("#bc");
#scheduleBox.AddContent("#bc");  // inject the DIV for BC events, and its contents.
fadeIn("fast");
}

Возможно, я слишком усложняю вещи или упускаю несколько вещей. В любом случае, я очень ценю какое-то просветление.

Answer 1

Демо

Я бы сказал примерно так:

$("#scheduleBox").children().remove();
$("#scheduleBox").hide();
$("#scheduleBox").append($("#bc"));
$("#scheduleBox").fadeIn("slow");

Answer 2

Прежде всего .hide() не очищает содержимое, оно просто скрыто. Если вы хотите очистить свой контент, просто используйте следующий метод

$('#scheduleBox').html('');

Это очистит все внутри scheduleBox.