Всем привет. Есть код.
$(document).ready(function () {
$('#mobile-one').on('click', function (e) {
e.preventDefault();
$('#mobile-block-one').fadeToggle(500).css("display", "block");
});
});
Из кода ясно что клик по блоку <div id="mobile"></div> открывает скрытый блок <div id="mobile-block"></div> и при повторном нажатии скрывает его.
Однако задача достаточно специфичная. Таких блоков несколько. То-есть несколько кнопок для открытия блоков и самих блоков несколько (пускай у них будут id mobile-block-one и mobile block-two).
Эти блоки по верстке наложены друг на друга и если их открыть одновременно, то первый блок всегда будет скрыт вторым блоком.
Однако если у первого блока поставить z-index: 1; тогда уже первый блок всегда будет наложен на второй блок.
Вопрос: Как менять значение z-index, чтобы открываемый блок всегда имел значение z-index больше чем у уже открытого блока и как это реализовать через jQuery ???
PS: В качестве варианта предполагаю только такой вариант измениея я z-index (открыть, закрыть блок) (1, 0, 3, 2, 6, 5, 10, 9, 15, 14, 21, 20).