How can I make my Accordion work

1

I want it to look like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion

However, I cant seem to get the functionality right. It does display and disappear when clicked on different anchor tags. However on mobile devices I want the accordion to show right underneath the accordion tags.

Here is my codepen => https://codepen.io/zootechdrum/pen/MWYZevr?editors=0011

Also, How can I make sure that on mobile the screen starts to read the script meant for that size? I tried to use document.screen.width but it does not seem to work.

2

Hello!

All your questions are answered by responsive design :slight_smile:. You have to create breakpoints for different screen sizes:

@media screen and (max-width: 1200px) {
  /* Styles for screens up to 1200px width */
}

@media screen and (max-width: 768px) {
  /* Styles for screens up to 768px width */
}

If you haven’t already, take the responsive design course here, on Free Code Camp. It should give you the tools to build what you’re trying to :slight_smile:.

By the way, you’re using Bootstrap, why not use the accordion that it provides? You’re doing it to learn more? If so, good for you :slight_smile:.

3

This is actually a take home interview question. I can only use vanilla Javascript. So if i did end up using the accordion from bootstrap I would need to use JQuery. To your point of using breakpoints the more challenging part is not the breakpoints its the Javascript that runs on different screen sizes. That’s my current issue.

4

But you’re taking the problem the wrong way :stuck_out_tongue:.

If you style the accordion with two states, say active and not, then you could create a class called active and add/remove it when user clicks the accordion.

For instance:

<style>
.accordion-content {
  display: none;
}

.accordion-content.active {
  display: block;
}
/* Here you would style the accordion however you see fit */
/* without dealing with behavior */
</style>

<script>
document.querySelector('.accordion-toggle').onclick = (e) => {
	const target = e.target
  console.log(target.nextElementSibling.classList)
  
  if (target.nextElementSibling.classList.contains('active')) {
  	target.nextElementSibling.classList.remove('active')
  } else {
  	target.nextElementSibling.classList.add('active')
  }
}
</script>

See this sample that may help you understand what I mean :slight_smile:.

5

I guess where my confusion lays is the transition between mobile and bigger screen sizes. As of now I get the accordion looking the way I want. I just need to append the content that was in material-paragraphsinto menu-items to display accordingly. I don’t know why, but I am getting the biggest brain fart.

6

It won’t work the way you want on mobile because the paragraphs are on a different div. If you want it too look like the one on w3schools, then take into account what their structure looks like (similar to my example too):

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

You just have restructure your code and HTML :slight_smile:.

7

Hey, so I did as you suggested. However, it still wont hide or show even though in the DOM it does show it changes from display none to block. Thank you for your time by the way

1 Like
8

Hey, so I know what the problem is,I take of the !important on .mobile-fit. However, if I do that it messes with how the content is laid out. Ill keep messing with it.

1 Like