Dynamic Toggle Div Slider

Question

I'm trying to make it where if you click on a button in the side bar it shows/slides up some text in the content section on the right of the sidebar. I would also like to toggle this by clicking the button (if that makes sense).

Any help would be really appreciated.

This is what I have so far: Fiddle: https://jsfiddle.net/fymjqonc/4/

$(function($) {
  $('.show').click(function() {
    $('.toggle').hide();
    $('#' + $(this).data('toggle')).show();
  });
  $('[data-toggle="item1"]').click();
});

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 20px;
}

.nav {
  background: lightgrey;
  color: #FFF;
}

.nav ul {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <nav class="nav">
    <ul>
      <li><a href="#" class="show" data-toggle="item1">Item 1</a></li>
      <li><a href="#" class="show" data-toggle="item2">Item 2</a></li>
      <li><a href="#" class="show" data-toggle="item3">Item 3</a></li>
      <li><a href="#" class="show" data-toggle="item4">Item 4</a></li>
      <li><a href="#" class="show" data-toggle="item5">Item 5</a></li>
    </ul>
  </nav>
  <div class="content">
    <div class="toggle" id="item1">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni rerum repellat sed quo eum consequuntur aliquid nobis dolore tempore. Enim.</p>
    </div>
    <div class="toggle" id="item2">
      <p>Step 2</p>
    </div>
    <div class="toggle" id="item3">
      <p>Step 3</p>
    </div>
    <div class="toggle" id="item4">
      <p>Step 4</p>
    </div>
    <div class="toggle" id="item5">
      <p>Step 5</p>
    </div>
  </div>

score 0 · Accepted Answer · answered Jun 07 '18 at 15:17

Hi Sorry but i don't really understand what you want to do, but take look of this snippet code for the highlighted menu.

$(function($) {
  $('nav ul li').click(function() {
   let index = $('nav ul li').index(this) + 1,
      list = $('nav ul li');
    
    list.removeClass('active');
    $('.content div').slideUp();
    $(this).addClass('active');
    $('.content div:nth-child('+ index +')').slideDown();
   
  });
});

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 20px;
}

.nav {
  background: lightgrey;
  color: #FFF;
}

.nav ul {
  list-style: none;
}

.active {
  background: blue;
}

.content > div  {
  display: none;
}

.content > div:first-child {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <nav class="nav">
    <ul>
      <li><a href="#" >Step 1</a></li>
      <li><a href="#" >Step 2</a></li>
      <li><a href="#"  >Step 3</a></li>
      <li><a href="#"  >Step 4</a></li>
      <li><a href="#"  >Step 5</a></li>
    </ul>
  </nav>

  <div class="content">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni rerum repellat sed quo eum consequuntur aliquid nobis dolore tempore. Enim.</p>
    </div>
    <div >
      <p>Step 2</p>
    </div>
    <div >
      <p>Step 3</p>
    </div>
    <div >
      <p>Step 4</p>
    </div>
    <div >
      <p>Step 5</p>
    </div>
  </div>

</div>

Hi, Sorry for not explaining myself as clear as possible. I believe you have pretty much done what I was looking for. I have a final question: is there a way for me to loop through the sidebar? For example, if I click on item 5 in the sidebar, and then click item 1, is there a way to make it scroll through all items before it gets to item 1? I'm assuming that would be some sort of CSS transition? Thank you for your help btw! — justaniceguy, Jun 07 '18 at 15:27
Ok, take look of this [link](https://stackoverflow.com/questions/6677035/jquery-scroll-to-element) you should use a jQuery scrollTo. Or you can make your own function or you can use a plugin like [this](https://www.npmjs.com/package/jquery-scrollTo#table-of-contents) — M.Formisano, Jun 26 '18 at 09:10

Dynamic Toggle Div Slider

1 Answers1