Open JQuery accordion when link with an id of element within the accordion is clicked

Question

Here is my issue http://jsfiddle.net/uJ3W5/12/

As you can see the 4 buttons at the top link to elements within section 1 of the accordion. However when the accordion is closed these links do not work.

I need it so that when you click the links, the accordion opens and the page scrolls to the relevant section, and I'm a bit stumped.

Thanks so much!

My HTML:

<head>
  <title>jQuery UI Accordion - No auto height</title>
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>

    <div class="buttons">
      <div><a href="#btn1" class="btn btn-primary btn-large">One</a></div>
      <div><a href="#btn2" class="btn btn-primary btn-large">Two</a></div>
      <div><a href="#btn3" class="btn btn-primary btn-large">Three</a></div>
      <div><a href="#btn4" class="btn btn-primary btn-large">Four</a></div>
    </div>


<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <h3 id="btn1">One</h3>
    <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    <h3 id="btn2">Two</h3>
    <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    <h3 id="btn3">Three</h3>
    <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    <h3 id="btn4">Four</h3>
    <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>
</div>


</body>
</html>

My jquery:

  $(function() {
    $( "#accordion" ).accordion({
      heightStyle: "content",
      active: false,
      collapsible: true 
    });
  });

I appear to have gotten it working with 1 button: http://jsfiddle.net/uJ3W5/16/ — Shane, Feb 25 '14 at 14:27
Got it! :D Working fiddle here http://jsfiddle.net/uJ3W5/19/ — Shane, Feb 25 '14 at 14:29
@LcSalazar I don't have enough rep to post an actual answer for another 8 hours, otherwise I wouldn't have. — Shane, Feb 25 '14 at 14:32
This just opens the accordion, it doesn't take the page to the anchor. Please, take a look at my answer, using a callback — LcSalazar, Feb 25 '14 at 14:54

LcSalazar · Accepted Answer · 2014-02-25T20:53:04.460

1

Actually, so it can work exactly as you want, you will have to use a callback function, so a href is called only when the accordion open finishes.

var callback = function() {};  

$(function() {
    $( "#accordion" ).accordion({
      heightStyle: "content",
      active: false,
      collapsible: true,
        activate: function() { callback(); }
    });
  });

    $(".buttons a").click(function(event) {
        var active = $("#accordion").accordion("option", "active")+"";
        if(active != "0") {
            event.preventDefault();
            var ahref = $(this).attr("href");
            callback = function() {
                location.href = ahref;
                callback = function() { };
            };
            $("#accordion").accordion("option", "active", 0);
        }
    });

Here you go: http://jsfiddle.net/uJ3W5/28/

The answer chosen as the right one does not take the screen where you want. Mine one does.

edited Feb 25 '14 at 20:53

answered Feb 25 '14 at 14:47

LcSalazar

15,390
3
29
62

@LcSalazar Hey, there is a bug that the buttons don't work if another accordion is already open. – Shane Feb 25 '14 at 16:16
I'll fix it... just a second – LcSalazar Feb 25 '14 at 17:05
Yes, just a detail. I changed the if condition from (active == "false" ) to (active != "0"). Here you go: http://jsfiddle.net/uJ3W5/28/ – LcSalazar Feb 25 '14 at 20:52

Alpha Codemonkey · Answer 2 · 2014-02-25T15:20:04.843

0

Attach an event to the buttons that will open the first panel of the accordion, and then scroll to the correct element.

$(".buttons a").on("click", function(e) {
  e.preventDefault();
  $("#accordion").accordion("option", "active",0);
  $(document).scrollTop( $($(e.target).attr("href")).offset().top );
});

Preventing the default action and specifically scrolling to the element is needed because activating an accordion panel will trigger a scroll to the top of that panel.

edited Feb 25 '14 at 15:20

answered Feb 25 '14 at 14:35

Alpha Codemonkey

3,064
18
26

This just opens the accordion, it doesn't take the page to the anchor. Please, take a look at my answer, using a callback – LcSalazar Feb 25 '14 at 14:53
updated to take the page to the anchor element inside the panel, instead of just the top of the active panel – Alpha Codemonkey Feb 25 '14 at 15:01

score 0 · Answer 3 · answered Feb 25 '14 at 14:45

0

use this function:

$(".buttons a").on('click', function(e){
    e.preventDefault();
    var _id=$(this).data("id");
    $( "#accordion" ).accordion( "option", "active", 0 );
    $(document).scrollTop( $("#btn"+_id).offset().top );  
});

and add a data-id attribute to your buttons like this:

    <a href="#btn1" data-id="1" class="btn btn-primary btn-large">One</a>
    <a href="#btn2" data-id="2" class="btn btn-primary btn-large">Two</a>
    <a href="#btn3" data-id="3" class="btn btn-primary btn-large">Three</a>
    <a href="#btn4" data-id="4" class="btn btn-primary btn-large">Four</a>

You can see it working here: http://jsfiddle.net/uJ3W5/22/

Hope it helps!

answered Feb 25 '14 at 14:45

campsjos

815
9
19

Your solution isn't working well at all, @Shane, because it searches for the `id` before open the accordion. That's why I suggest you to use `preventDefault()` function then open the accordion and then search for the `id` – campsjos Feb 25 '14 at 14:51
I would appreciate if you mark my answer as the good one, or at least give me +1 :) – campsjos Feb 25 '14 at 17:10

Open JQuery accordion when link with an id of element within the accordion is clicked

3 Answers3

Linked