1

The current situation is this: The code below works to toggle a div once the corresponding link is clicked on. It also hides the div if you click on that link again.

What I want this to do is hide all divs unless you click on the corresponding a href link. When you do click on this a href link, it shows the right div and then hides the others. And it automatically 'jumps' down to the toggled div, similar to the effect of if you had an anchor tag in there linking the a href link and the div.

Currently when I click on the link, it shows the div but I still have to scroll down the page to view the div. It does not automatically jump down to that div that was toggled. It also does not hide the other divs when you click on the current link for viewing. I played around with slideToggle() but I would still have to scroll down to view the div that was toggled.

Here is sample code of what I have: 

 <div class="row">
      <div class="large-12 columns">

         <a href="javascript:toggleByClass('content1')" class="link-list"> Content 1 </a>
         <a href="javascript:toggleByClass('content2')" class="link-list"> Content 2 </a>
         <a href="javascript:toggleByClass('content3')" class="link-list"> Content 3 </a>
  </div>
 </div>

 <div class="row">
    <div class="large-12 columns">

     <div class="content1" style="display: none;">
       <p> Information in Content 1</p>
     </div>
     <div class="content2" style="display: none;">
       <p> Information in Content 2</p>
     </div>
     <div class="content3" style="display: none;">
       <p> Information in Content 3</p>
     </div>
  </div>
 </div>

  <script type="text/javascript">

    function toggleByClass(className) {
     $("." + className).toggle();
}

 </script>

Any advice for direction is greatly appreciated.

  • After receiving a link saying this might be a possible duplicate question - I wanted to point out that I was not trying to add an anchor tag to jump to content on a page. I wanted to jump down a page to view a toggled div, which was already in place, and hide the other divs that were not toggled.
user3604867
  • 133
  • 1
  • 1
  • 11
  • possible duplicate of [How to go to a specific element on page?](http://stackoverflow.com/questions/4801655/how-to-go-to-a-specific-element-on-page) – Jan Sep 08 '15 at 16:34
  • Jan - while this link might show something similar - it is still slightly different than what I am asking. That post is asking for help on how to toggle the div (they asked for how to jump down to a div without using an anchor tag) - I have already done that above using the toggleByClass function. What I'm seeking is more of a how to slide down to the current div that was toggled on which is looks like this scrollIntoView might be helpful to achieve this. Thank you for posting this link as it still is helpful. – user3604867 Sep 08 '15 at 17:09
  • "they asked for how to jump down to a div without using an anchor tag" Yes, that's exactly what you're asking as well. using `scrollIntoView` is even one of the answers to the linked question http://stackoverflow.com/a/4801674/78639 – Jan Sep 08 '15 at 17:28

3 Answers3

3

For scrolling down to the elements automatically, try adding this line to your toggleByClass function:

document.getElementsByClassName(className)[0].scrollIntoView();

See this page for more details.

For hiding the other elements, try adding this line to your toggleByClass function:

$("." + className).siblings().hide();
Cauterite
  • 1,637
  • 17
  • 24
  • This fixed this issue! Thank you very much Cauterite! – user3604867 Sep 08 '15 at 17:23
  • @user3604867 no problem; by the way, I recommend [devdocs.io](http://devdocs.io) as a reference guide for any JS/HTML/CSS development - it consolidates many different documentation sets, including the DOM API and jQuery, so it's a good place to look when you're facing these kinds of problems. – Cauterite Sep 08 '15 at 17:28
  • That's great! Thank you, will definitely check it out. – user3604867 Sep 08 '15 at 17:31
0

I made some alterations to your method that I think solves the issues. It utilizes anchor tags to jump to the correct div and show it while hiding the others. 

$(document).ready(function(){
 $(".collapse-link").click(function(){
        var idToCollapse = $(this).attr("href");
        $(".collapse-div").not(idToCollapse).hide();
        $(idToCollapse).toggle();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
      <div class="large-12 columns">
         <a href="#content1" class="collapse-link"> Content 1 </a>
         <a href="#content2" class="collapse-link"> Content 2 </a>
         <a href="#content3" class="collapse-link"> Content 3 </a>
      </div>
 </div>

 <div class="row">
    <div class="large-12 columns">

     <div id="content1" class="collapse-div" style="display: none;">
       <p> Information in Content 1</p>
     </div>
     <div id="content2" class="collapse-div" style="display: none;">
       <p> Information in Content 2</p>
     </div>
     <div id="content3" class="collapse-div" style="display: none;">
       <p> Information in Content 3</p>
     </div>
  </div>
 </div>
Deftwun
  • 1,162
  • 12
  • 22
  • I didn't see you accepted an answer until after I posted but I'll leave it up just as an alternative – Deftwun Sep 08 '15 at 17:40
-1

Modify to:

<a href="#content1"  id="atag1" class="link-list"> Content 1 </a>
<div id="content1" class="content1" style="display: none;">

and

$('#atag1').on("click", function(){
     $('.content1').toggle()
})

This can be extended to the remaining two.

Leistungsabfall
  • 6,368
  • 7
  • 33
  • 41
Anudeep Rentala
  • 150
  • 1
  • 6