Форум

Njeee · #1 (**permalink**) 17.11.2016, 14:19

Всем привет. Сделал скрытие\показ при нажатии на кнопку, но понял что в таком виде код будет слишком большим и наверняка есть более простой способ реализовать это. Если кому не сложно посмотрите и подскажите что изменить или добавить.

http://codepen.io/nojee/pen/GNNpay

<html><head>

<style> #box2,#box3 {display:none;} </style> 

<script>

function hide(){
	document.getElementById("box1").style.display = 'none';
	document.getElementById("box2").style.display = 'none';
	document.getElementById("box3").style.display = 'none';
}

function showbox1(){
	document.getElementById('box1').style.display = 'block';
}
function showbox2(){
	document.getElementById('box2').style.display = 'block';
}
function showbox3(){
	document.getElementById('box3').style.display = 'block';
}
</script>

</head>
<body>

<div class="mainbar">
	<div id="box1">
		<h2>TEST1</h2>
		<p>Текст№1</p>
	</div>
	<div id="box2">
		<h2>TEST2</h2>
		<p>Текст№2</p>
	</div>
	<div id="box3">
		<h2>TEST3</h2>
		<p>Текст№3</p>
	</div>
</div>

<input type="button" onclick="hide(), showbox1()" value="test 1" />
<input type="button" onclick="hide(), showbox2()" value="test 2" />
<input type="button" onclick="hide(), showbox3()" value="test 3" />


</body>
</html>

Желательно на чистом js, без использования библиотек.

рони · #2 (**permalink**) 17.11.2016, 14:39

Njeee,
форум поиск открывашка

Njeee · #3 (**permalink**) 17.11.2016, 15:22

Огромное спасибо, если бы знал что именно искать нужно "открывашку"

Njeee · #4 (**permalink**) 17.11.2016, 15:57

Нашел нужную реализацию, как раз то что я искал! Но если нажать на любую точку вне выводимого блока, блок исчезает. Можно как то убрать это?

http://codepen.io/nojee/pen/GNNpay

function init() {
				var form = document.querySelectorAll('.box'),
						tel = document.querySelectorAll('.openbox'),
						open;
				document.onclick = function(event) {
						var elem = event.target;
						if (open && (elem === open || open.contains(elem))) return false;
						if (elem.classList.contains('openbox')) {
								for (var i = 0; i < tel.length; i++) {
										if (elem === tel[i]) break
								}
								if (open && open !== form[i]) open.classList.remove("show");
								open = form[i];
								open.classList.toggle("show");
								return false;
						}
					open &&   open.classList.remove("show");
				}
		}
		window.onload = init;

Хотелось бы что бы скрипт реагировал только на кнопки.

рони · #5 (**permalink**) 17.11.2016, 16:12

Njeee,

<!DOCTYPE html><html class=''>
<head>
  <meta charset="utf-8">
<style class="cp-pen-styles">.box.show {  visibility: visible; opacity: 1; }
.box{
  background-color: green;
  display: inline-block;
  left: 50%;
  opacity: 0;
  padding: 15px;
  width: 300px;
  height: 323px;
  position: fixed;
  text-align: justify;
  top: 40%;
  visibility: hidden;
  z-index: 999999;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: opacity .5s, top .5s;
  -moz-transition: opacity .5s, top .5s;
  -ms-transition: opacity .5s, top .5s;
  -o-transition: opacity .5s, top .5s;
  transition: opacity .5s, top .5s;
  border-radius: 11px;
}</style></head><body>

<html><head>

  <script>
    function init() {
        var form = document.querySelectorAll('.box'),
            tel = document.querySelectorAll('.openbox'),
            open;
        document.onclick = function(event) {
            var elem = event.target;
                if (elem.classList.contains('openbox')) {
                for (var i = 0; i < tel.length; i++) {
                    if (elem === tel[i]) form[i].classList.toggle("show")
                    else form[i].classList.remove("show")
                }

                return false;
            }

        }
    }
    window.onload = init;
  </script>

</head>
<body>

<div class="mainbar">
  <div class="box">
    <h2>TEST1</h2>
    <p>Текст№1</p>
  </div>
  <div class="box">
    <h2>TEST2</h2>
    <p>Текст№2</p>
  </div>
  <div class="box">
    <h2>TEST3</h2>
    <p>Текст№3</p>
  </div>
</div>


<a href="#" class="openbox">test 1</a>
<a href="#" class="openbox">test 2</a>
<a href="#" class="openbox">test 3</a>

</body>
</html>

</body></html>

Njeee · #6 (**permalink**) 18.11.2016, 07:56

рони, большое спасибо!

Форум

Справочник

Discord чат

Курсы javascript