1

I'm new to JavaScript and jQuery. I have this accordion html / js which works great but it's for mobile and I need to make it so when title is clicked, it will scroll down to the top of that clicked element / content. I assume I need to wrap it with an ID and use JS to wrap it in an anchor linking to that ID, but I am not sure how.

Codepen: http://codepen.io/anon/pen/QNdGGL

var accordionContent = $('.accordion p');

$('.accordion h6').click(function() {

  // Check if current accordion item is open
  var isOpen = $(this).next().is(":visible");

  // Hide all accordion items
  accordionContent.hide();

  // Open accordion item if previously closed
  if (!isOpen) {
    $(this).nextUntil('h6').show();
  }
});

$('.accordion h6').first().trigger('click');
.accordion h6 {

  display: block;

  cursor: pointer;

  background: black;

  padding: 10px;

  color: #fff;

}

.accordion p {

  display: none;

  margin: 0;

  padding: 0 0 1em;

}

.accordion * {

  display: none

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="accordion">
  <h6>heading 1</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium leo sed erat dapibus, eget sollicitudin risus maximus. Maecenas id arcu in diam fermentum dictum vel id ligula. Nullam purus augue, aliquam pulvinar sodales cursus, luctus
    vel arcu. Nunc vestibulum volutpat leo in viverra. Maecenas ullamcorper, erat vitae tempus semper, nibh urna feugiat ipsum, vitae vulputate tortor nibh in neque. Maecenas et pretium enim, non rhoncus nisi. Nam convallis, nisi vitae consectetur convallis,
    lorem nunc efficitur lacus, eu feugiat ex elit quis urna. Nullam ut urna venenatis, iaculis mauris eu, porta est. Etiam vestibulum dictum mi at aliquam. Cras id euismod quam. Maecenas a egestas nunc. Praesent ullamcorper ipsum metus, ut blandit est
    consequat id. Aliquam turpis eros, condimentum ac magna ut, sollicitudin interdum odio. Pellentesque nec cursus ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin risus risus, imperdiet ut dignissim
    vitae, vestibulum aliquam augue. Proin tristique ipsum faucibus convallis semper. Ut tempus felis ante, in posuere augue malesuada sed. Maecenas feugiat velit sit amet ultricies ornare. Ut feugiat nec erat elementum commodo. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eleifend mauris sit amet ipsum sollicitudin, a efficitur urna malesuada. Ut venenatis rutrum leo, a condimentum augue pulvinar non. Nunc vitae elementum neque, eu ullamcorper
    nisl. Curabitur eu aliquet augue. Fusce id maximus magna. Phasellus ac porttitor metus. Suspendisse dapibus nunc vitae diam pellentesque iaculis. Curabitur mattis rutrum massa, vitae interdum est sollicitudin vitae. Donec gravida felis a est condimentum,
    quis ultricies magna maximus. Aenean convallis ligula a dolor hendrerit, quis imperdiet leo accumsan. Morbi id blandit justo, sit amet viverra augue. Fusce urna mi, ullamcorper quis ultricies congue, maximus ut ante. Aliquam enim purus, tempor non
    semper sit amet, porta at urna. Donec venenatis, metus a aliquam tincidunt, mauris felis molestie dolor, sed elementum sapien tortor a purus.</p>

  <h6>heading 2</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium leo sed erat dapibus, eget sollicitudin risus maximus. Maecenas id arcu in diam fermentum dictum vel id ligula. Nullam purus augue, aliquam pulvinar sodales cursus, luctus
    vel arcu. Nunc vestibulum volutpat leo in viverra. Maecenas ullamcorper, erat vitae tempus semper, nibh urna feugiat ipsum, vitae vulputate tortor nibh in neque. Maecenas et pretium enim, non rhoncus nisi. Nam convallis, nisi vitae consectetur convallis,
    lorem nunc efficitur lacus, eu feugiat ex elit quis urna. Nullam ut urna venenatis, iaculis mauris eu, porta est. Etiam vestibulum dictum mi at aliquam. Cras id euismod quam. Maecenas a egestas nunc. Praesent ullamcorper ipsum metus, ut blandit est
    consequat id. Aliquam turpis eros, condimentum ac magna ut, sollicitudin interdum odio. Pellentesque nec cursus ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin risus risus, imperdiet ut dignissim
    vitae, vestibulum aliquam augue. Proin tristique ipsum faucibus convallis semper. Ut tempus felis ante, in posuere augue malesuada sed. Maecenas feugiat velit sit amet ultricies ornare. Ut feugiat nec erat elementum commodo. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eleifend mauris sit amet ipsum sollicitudin, a efficitur urna malesuada. Ut venenatis rutrum leo, a condimentum augue pulvinar non. Nunc vitae elementum neque, eu ullamcorper
    nisl. Curabitur eu aliquet augue. Fusce id maximus magna. Phasellus ac porttitor metus. Suspendisse dapibus nunc vitae diam pellentesque iaculis. Curabitur mattis rutrum massa, vitae interdum est sollicitudin vitae. Donec gravida felis a est condimentum,
    quis ultricies magna maximus. Aenean convallis ligula a dolor hendrerit, quis imperdiet leo accumsan. Morbi id blandit justo, sit amet viverra augue. Fusce urna mi, ullamcorper quis ultricies congue, maximus ut ante. Aliquam enim purus, tempor non
    semper sit amet, porta at urna. Donec venenatis, metus a aliquam tincidunt, mauris felis molestie dolor, sed elementum sapien tortor a purus.</p>

  <h6>heading 3</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium leo sed erat dapibus, eget sollicitudin risus maximus. Maecenas id arcu in diam fermentum dictum vel id ligula. Nullam purus augue, aliquam pulvinar sodales cursus, luctus
    vel arcu. Nunc vestibulum volutpat leo in viverra. Maecenas ullamcorper, erat vitae tempus semper, nibh urna feugiat ipsum, vitae vulputate tortor nibh in neque. Maecenas et pretium enim, non rhoncus nisi. Nam convallis, nisi vitae consectetur convallis,
    lorem nunc efficitur lacus, eu feugiat ex elit quis urna. Nullam ut urna venenatis, iaculis mauris eu, porta est. Etiam vestibulum dictum mi at aliquam. Cras id euismod quam. Maecenas a egestas nunc. Praesent ullamcorper ipsum metus, ut blandit est
    consequat id. Aliquam turpis eros, condimentum ac magna ut, sollicitudin interdum odio. Pellentesque nec cursus ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin risus risus, imperdiet ut dignissim
    vitae, vestibulum aliquam augue. Proin tristique ipsum faucibus convallis semper. Ut tempus felis ante, in posuere augue malesuada sed. Maecenas feugiat velit sit amet ultricies ornare. Ut feugiat nec erat elementum commodo. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eleifend mauris sit amet ipsum sollicitudin, a efficitur urna malesuada. Ut venenatis rutrum leo, a condimentum augue pulvinar non. Nunc vitae elementum neque, eu ullamcorper
    nisl. Curabitur eu aliquet augue. Fusce id maximus magna. Phasellus ac porttitor metus. Suspendisse dapibus nunc vitae diam pellentesque iaculis. Curabitur mattis rutrum massa, vitae interdum est sollicitudin vitae. Donec gravida felis a est condimentum,
    quis ultricies magna maximus. Aenean convallis ligula a dolor hendrerit, quis imperdiet leo accumsan. Morbi id blandit justo, sit amet viverra augue. Fusce urna mi, ullamcorper quis ultricies congue, maximus ut ante. Aliquam enim purus, tempor non
    semper sit amet, porta at urna. Donec venenatis, metus a aliquam tincidunt, mauris felis molestie dolor, sed elementum sapien tortor a purus.</p>

</div>
halfer
  • 18,701
  • 13
  • 79
  • 158
James
  • 1,561
  • 14
  • 38
  • take a look here if you want to animate that scrolling http://stackoverflow.com/questions/6677035/jquery-scroll-to-element – The Process Mar 17 '16 at 02:54
  • its not the scolling i have an issue with its making the content generating markup to do it – James Mar 17 '16 at 03:09

2 Answers2

0

use anchor tag instead of h6

<a href="#heading1" id="heading1">
    heading 1
</a>

check out here: http://codepen.io/prakash_kumar/pen/MyJbmy#0

If scroll animation is not needed, then remove the animate jquery code.

Prakash Kumar
  • 46
  • 4
  • Great solution but i cannot modify the content that is pulled through so need to add those anchors / ids with the js? possible to help me out with that? – James Mar 17 '16 at 03:12
  • I guess need to wrap h6 with link and then wrap the content in a di with a id as well....? – James Mar 17 '16 at 03:13
0

I worked it out myself and here was the solution:

var headers = $("#tab_description h6");
  var accordionContent = $('#tab_description p, #tab_description ul, #tab_description iframe, #tab_description div');

  $(headers).each(function(i) {
    $(this).append('<a href="#accordion_'+(i+1)+'" id="accordion_'+(i+1)+'"></a>');
  });

  $('#tab_description h6').click(function() {

    // Check if current accordion item is open
    var isOpen = $(this).next().is(":visible");

    // Hide all accordion items
    accordionContent.hide();

    // Open accordion item if previously closed
    if (!isOpen) {
      $(this).nextUntil('h6').show();
    }

    $('html, body').animate({
      scrollTop: $(this).offset().top
    }, 2000);

  });

  $('#tab_description h6').first().trigger('click');
James
  • 1,561
  • 14
  • 38