asked on

Accordion only opening first <lI>

I have a couple of accordions on a page that are not functioning properly. When I click the button to expand the items it only displays the first item in the <ul> , which element object should I use to display the entire <ul>? I also need the entire first <ul> to be displayed upon page load. Here is a code snippet.

<div class="column  column__primary">			
			
			<section class="module  videos">
				<header class="module-name">
					<h1>Videos</h1>
					<ul class="sort-options">
						<li class="sort-options--selected"><a href="#" class="sort--newest">Newest</a></li>
						<li><a href="#" class="sort--oldest">Oldest</a></li>
						<li><a href="#" class="sort--alphabetical">ABC</a></li>
					</ul>
				</header>
				<div class="video-list  accordion" id="accordion">
					<ul class="accordion__group">
						<a class="accordion__category"><h3>Category 1 subheader</h3></a>
						<li class="video-list__item">
							<a href="#">
								<h2>An enormous help</h2>
								<div class="video-preview-image">
									<img src="images/bcn/video-thumbnails/haddad-04.jpg" alt="" />
									<p>Play</p>
								</div>
							</a>
						</li>
						<li class="video-list__item">
							<a href="#">
								<h2>Would recommend</h2>
								<div class="video-preview-image">
									<img src="images/bcn/video-thumbnails/haddad-05.jpg" alt="" />
									<p>Play</p>
								</div>
							</a>
						</li>
						<li class="video-list__item">
							<a href="#">
								<h2>An enormous help</h2>
								<div class="video-preview-image">
									<img src="images/bcn/video-thumbnails/haddad-04.jpg" alt="" />
									<p>Play</p>
								</div>
							</a>
						</li>
					</ul>  <!-- /.accordion__group -->
					<ul class="accordion__group">
						<a class="accordion__category"><h3>Category 2 subheader</h3></a>
						<li class="video-list__item">
							<a href="#">
								<h2>An enormous help</h2>
								<div class="video-preview-image">
									<img src="images/bcn/video-thumbnails/haddad-04.jpg" alt="" />
									<p>Play</p>
								</div>
							</a>
						</li>
						<li class="video-list__item">
							<a href="#">
								<h2>Would recommend</h2>
								<div class="video-preview-image">
									<img src="images/bcn/video-thumbnails/haddad-05.jpg" alt="" />
									<p>Play</p>
								</div>
							</a>
						</li>
					</ul>  <!-- /.accordion__group -->
					<ul class="accordion__group">
						<a class="accordion__category"><h3>Category 3 subheader</h3></a>
						<li class="video-list__item">
							<a href="#">
								<h2>An enormous help</h2>
								<div class="video-preview-image">
									<img src="images/bcn/video-thumbnails/haddad-04.jpg" alt="" />
									<p>Play</p>
								</div>
							</a>
						</li>
						<li class="video-list__item">
							<a href="#">
								<h2>Would recommend</h2>
								<div class="video-preview-image">
									<img src="images/bcn/video-thumbnails/haddad-05.jpg" alt="" />
									<p>Play</p>
								</div>
							</a>
						</li>
						<li class="video-list__item">
							<a href="#">
								<h2>An enormous help</h2>
								<div class="video-preview-image">
									<img src="images/bcn/video-thumbnails/haddad-04.jpg" alt="" />
									<p>Play</p>
								</div>
							</a>
						</li>
						<li class="video-list__item">
							<a href="#">
								<h2>Would recommend</h2>
								<div class="video-preview-image">
									<img src="images/bcn/video-thumbnails/haddad-05.jpg" alt="" />
									<p>Play</p>
								</div>
							</a>
						</li>
					</ul>  <!-- /.accordion__group -->
				</div>  <!--/.video-list-->
			</section>  <!--/.videos-->

Open in new window

<script>
var acc = document.getElementsByClassName("accordion__category");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

Open in new window

This is the first accordion. Whenever I change this line " var panel = this.nextElementSibling;" to a different element object the accordion does not function properly. Thanks

Zakaria Acharki

Are you using any library? and please add CSS code or a live working sample if possible so we could run your code.

Are you able to use jQuery as a solution?

Michelle Jackson

ASKER

Yes, anything that will work...any suggestions? Thanks

Zakaria Acharki

You need to select all the li elements of the clicked ul try :

acc[i].addEventListener("click", function() {
          this.classList.toggle("active");
          var lis = this.parentNode.querySelectorAll('li');
          for (var i=0; i<lis.length; i++) lis[i].style.display= lis[i].style.display=="none"?"block":"none";
});

Open in new window

Zakaria Acharki

If you could use jQuery it could be more simple like :

$('.accordion__category').on('click', function(){
     $(this).toggleClass("active").parent().find('li').toggle();
});

Open in new window

Just don't forget to include the library using the following line before your script :

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

Open in new window

Michelle Jackson

ASKER

Thanks Zakaria, I changed the code to this:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
	<script>
$('.accordion__category').on('click', function(){
     $(this).toggleClass("active").parent().find('li').toggle();
});
}
</script>

Open in new window

But now nothing happens when I click on the dropdown, do i need to make any other adjustments?

ASKER CERTIFIED SOLUTION

Zakaria Acharki

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michelle Jackson

ASKER

That was it...thanks a bunch and have a great day.

Zakaria Acharki

You're welcome anytime sir. HAPPY CODING.

Accordion only opening first &lt;lI&gt;

Accordion only opening first <lI>