Показать/скрыть заголовки H4 не работает в jQuery ⇐ Jquery

[Anonymous]

У меня возникла проблема при попытке показать/скрыть некоторые элементы h4. Цель состоит в том, чтобы щелкнуть информационную ссылку li и отобразить соответствующий текст h4 в следующей таблице (по одному), но это не работает.
Я пробовал использовать .css("display","none/block"), .style("display","none/block") и несколько других в моем коде jQuery.
Демо-версия JSFiddle
Код ссылок li

Код: Выделить всё

Quick Facts



[list]
[*][url=#]How to join[/url]
[*][url=#]Who we are[/url]
[*][url=#]Officers[/url]
[*][url=#]Other[/url]
[*][url=#]Other[/url]
[*][url=#]Other[/url]
[/list]

Текст h4, который я хочу отобразить

Код: Выделить всё

[h4]How to join[/h4]
[h4]Who[/h4]
[h4]Officers[/h4]
[h4]Other1[/h4]
[h4]Other2[/h4]
[h4]Other3[/h4]

JQuery

Код: Выделить всё

$(document).ready(function () {
$('.informational').hide();
});

$('[id^=_]').click(function () {
$('.informational').hide();
var naming = $(this).attr('id').replace('_', '');
alert("selected ID is: " + naming);
document.getElementById(naming).show();
});

P.S. Я открыт для более эффективных способов сделать это.
Я использую Bootstrap 3/MVC 5.

Подробнее здесь: https://stackoverflow.com/questions/245 ... -in-jquery