Два элемента div. по нажатию на один из них, второму присваивается display:none; По второму нажатию, див снова отображается. Не могу найти ошибку в коде. Помогите пожалуйста!
<div class="show" name= "shw">
<img src="box.png" class="showButton"><p id="shb">Show/Hide</p>
</div>
<div class="main" style="display: block;" name="mn">
<div class="pocketchoose" >
<div class="chosen" rel='1' name="pct">
<img src="//" alt="1" >
<p>1</p>
</div>
</div>
<div class="pocketchoose" >
<div class="chosen" rel='2' name="pct">
<img src="//" alt="2">
<p>2</p>
</div>
</div>
<div class="pocketchoose" >
<div class="chosen" rel='3' name="pct">
<img src="//" alt="3">
<p>3</p>
</div>
</div>
</div>
<div class="show" name="shw">
<img src="box.png" class="showButton"><p id="shb">Show/Hide</p>
</div>
<div class="main" style="display: block;" name="mn">
<div id="initials">
<div class="img_init">
<img id="jimg" src="in_jacket.png">
<input type="text" class="inits" placeholder="input_text" value="">
</div>
</div>
</div>
function SH() {
var self = $(this);
console.log(self.next('div').css('display'));
var flag = true;
if (flag) {
self.next('div').css('display','none');
var flag = true;
console.log(flag);
}
else {
self.next('div').css('display','block');
var flag = true;
console.log(flag);
}
}
$('.show').on('click',SH);
$('.showButton').on('click',SH);