Форум

JohnJohn · #1 (**permalink**) 31.07.2017, 02:54

Добрый день, подскажите, пожалуйста, как можно решить задачу(на чистом JS), при клике на блок <div class="section_caption">на место этой страницы, слева выезжал блок <div class='description'> с соответствующей информацией(one > text1, two > text2, etc).

<head>
    <style> 
 .sections {
    margin: 0 auto;
    height: 100%;
    width: 90%;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}
.blocks {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.section_caption {
    height: 150px;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #000;
    flex-flow: row nowrap;
    margin: 2% ;
    cursor: pointer;
    background: #000000;
}

.section_caption p {
    text-align: center;
    padding: 0;
    color: #ffffff;
    font-size: 14px;

}
.description_blocks {
  display: none;
}

    </style>
  </head>

  <body>
    <div id='products' class="sections_description">


  <div id='section_tax' class ="sections">
      <div class="blocks">
    <div class="section_caption">
        <p>One</p></div>
    <div class="section_caption">
        <p>Two</p></div>
    <div class="section_caption">
        <p>Three</p></div>
      </div>
      <div class="blocks">
    <div class="section_caption">
        <p>Four</p></div>
    <div class="section_caption">
        <p>Five</p></div>
    <div class="section_caption">
        <p>Six</p></div>
          </div>
      <div class="blocks">
    <div class="section_caption">
        <p>Seven</p></div>
    <div class="section_caption">
        <p>Eight</p></div>
    <div class="section_caption" onclick="toggleVisibility('description_debt');">
        <p>Nine</p></div>
          </div>
 <div class='description_blocks'>
 <div class='description'>
      <p>Text1</p>
 </div>
  <div class='description'>
      <p>Text2</p>
 </div>
  <div class='description'>
      <p>Text3</p>
 </div>
  <div class='description'>
      <p>Text4</p>
 </div>
  <div class='description'>
      <p>Text5</p>
 </div>
  <div class='description'>
      <p>Text6</p>
 </div>
  <div class='description'>
      <p>Text7</p>
 </div>
  <div class='description'>
      <p>Text8</p>
 </div>
  <div class='description'>
      <p>Text9</p>
 </div>
 </div>
 </div>
 <script>

 </script>
  </body>

j0hnik · #2 (**permalink**) 31.07.2017, 02:58

чтобы полностью перекрывал страницу?

j0hnik · #3 (**permalink**) 31.07.2017, 03:27

<html>
<head>
<style> 
	.sections {
		margin: 0 auto;
		height: 100%;
		width: 90%;
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		z-index: 1;
		position: relative;
	}
	.blocks {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
	}

	.section_caption {
		height: 150px;
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #ffffff;
		border: 1px solid #000;
		flex-flow: row nowrap;
		margin: 2% ;
		cursor: pointer;
		background: #000000;
	}

	.section_caption p {
		text-align: center;
		padding: 0;
		color: #ffffff;
		font-size: 14px;

	}
	.description {
		display: block;
		position: absolute;
		top: 0;
		left:-110%;
		width: 100%;
		height: 100%;
		background: rgba(255,0,0, 0.2);
		z-index: 5;
		transition: 3s;
	}
</style>
</head>
<body>
	 <div id='products' class="sections_description">
  <div id='section_tax' class ="sections">
      <div class="blocks">
    <div class="section_caption">
        <p>One</p></div>
    <div class="section_caption">
        <p>Two</p></div>
    <div class="section_caption">
        <p>Three</p></div>
      </div>
      <div class="blocks">
    <div class="section_caption">
        <p>Four</p></div>
    <div class="section_caption">
        <p>Five</p></div>
    <div class="section_caption">
        <p>Six</p></div>
          </div>
      <div class="blocks">
    <div class="section_caption">
        <p>Seven</p></div>
    <div class="section_caption">
        <p>Eight</p></div>
    <div class="section_caption" onclick="toggleVisibility('description_debt');">
        <p>Nine</p></div>
          </div>
 <div class='description_blocks'>
 <div class='description'>
      <p>Text1</p>
 </div>
  <div class='description'>
      <p>Text2</p>
 </div>
  <div class='description'>
      <p>Text3</p>
 </div>
  <div class='description'>
      <p>Text4</p>
 </div>
  <div class='description'>
      <p>Text5</p>
 </div>
  <div class='description'>
      <p>Text6</p>
 </div>
  <div class='description'>
      <p>Text7</p>
 </div>
  <div class='description'>
      <p>Text8</p>
 </div>
  <div class='description'>
      <p>Text9</p>
 </div>
 </div>
 </div>
	<script>
 document.querySelectorAll('.section_caption').forEach((el, i)=> el.onclick =()=> document.querySelectorAll('.description')[i].style.left = 0);
  document.querySelectorAll('.description').forEach(el=> el.onclick =()=> el.style.left = '-120%');
</script>
</body>
</html>

JohnJohn · #4 (**permalink**) 31.07.2017, 13:29

Да, спасибо.

Форум

Справочник

Discord чат

Курсы javascript