Создание скрытого текста (а затем последующего его отображения) в Bootstrap?

Question

На вкладке «Атом» моей игры «Периодическая алхимия» у меня есть выпадающие списки, которые позволяют пользователям выбирать, сколько протонов, нейтронов и электронов они хотят в своем атоме. Если пользователь наносит удар по определенному атому, скажем, водороду (1 Протон, 1 Нейтрон, 1 Электрон), тогда появляется текст «Водород: 1», означающий, что вы обнаружили водород. К сожалению, я не могу найти что-либо на веб-сайте Bootstrap Information: getboostrap.com
Кроме Модалей, которые не устраивали моих потребностей. Есть ли этому решение?

Answer 1

Это не функция начальной загрузки. Вы можете скрыть текст с помощью CSS: display: none;. Вы можете показать его с помощью jQuery .show().

Answer 2

Это соответствует вашим потребностям?

JSFiddle

HTML:

<select class="selection" id="protons"> 
    <option value="0">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<select class="selection" id="neutrons"> 
    <option value="0">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<select class="selection" id="electrons"> 
    <option value="0">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<div class="atom hide" data-protons="1" data-neutrons="1" data-electrons="1">Hydrogen</div> 
<div class="atom hide" data-protons="1" data-neutrons="1" data-electrons="2">Whatever</div> 

JS:

$('.selection').change(function() { 
    $('.atom').addClass('hide'); 
    $('.atom[data-protons=' + $('#protons').val() + '][data-neutrons=' + $('#neutrons').val() + '][data-electrons=' + $('#electrons').val() + ']').removeClass('hide'); 
});