Hide-it | progresive web app which utilizes whitespaces | Frontend Framework library

I am a beginner and therefore learning by working on projects. This is a FAQ project which I am struggling with.

There are questions and answers and I have divided them into categories. If I choose first category - “all” - all questions displays or when I click on the other category, only questions related to this category display and others gets hidden.

Similarly, when I click on a question, it’s respective answer should display or hide as I toggle. This is what I meant to achieve.

Now, when the page loads and I click on the questions, their respective answers hides and displays (toggle) - works fine as I expected. Note: It only works when I refresh the page.

But my problem is as I click on the categories including “all” , functionality of show and hide questions disappears. It does not work with any category.

In other words, I click on a category and then click on a question to check the answer, toggling does not work at all.

Here is my code (faqsearch):

Please help me find solutions for these two questions:

1. What and where am I doing wrong?
2. How to solve it?

Thank you!

I am building a small e-commerce website for my sister and I have a left-side navigation panel to select a category of clothes (all, pants, shirts and so on). You can only see one category at once.

What I am not able to achieve is to change the background color of the selected category like following picture (it's darker because I am using :hover but I want to change the background color on the selected button when the user click on it)

I was thinking to add a new class to the selected button but then how can I remove that same class on the previously selected button?

categories

I made a list of inputs with a button at the bottom that allows you to deselect all elements. Using jquery the inputs modify the class of content on the page. This function works, but i want the deselect all button to be able to deselect all checkboxes AND actually modify the classes. Here is the html:

I use the widget backend to embed an interactive matplotlib figure in an ipywidgets.GridBox. The window title takes up too much space and I want to remove it. With plt.figure(' ') it becomes invisible but even with fig.tight_layout() the space is still reserved and takes up useless space in my layout. Below is a minimal example.

Here the element I want to test for

I have a simple flexbox scenario - parent, few items etc.

I need to selectively hide one of the child items, which I do using display: none.

However, at a later point, I need to reinstate the item visibility - but as what? I It's not a flex, and I don't think it's an inline-flex, so what is it?

I can't use display: unset as it only seems to be moderately supported. Any ideas?

I am trying to prevent the page from scrolling when the menu is open by way of clicking the hamburger icon. I do not want to use css because when I create the class "body.noScroll,html.noScroll{overflow: hidden}" it removes the scroll bar and causes the page to widen slitely causing the menu animation to jump and look like garbage. So CSS is a no go. I have searched this site and read multiple ways to try this. Mainly this page Just disable scroll not hide it?

1. My first attempt:

I tried this solution, but it doesn't work as I expected.
Here is my code, and this is what i have tried.

I'm building a website for a restaurant.The navigation bar is covering the whole page,but just on specific pages(cart,login,register).On home page or menu page it works normally. I was working on home page and after that, when i tried to go on login, the navigation bar was on the whole page.I don't know why it's doing this and more bizzar is that it's doing it on specific pages. In home html i added comments tag for you to know what i had added before the problem appeared.

Image:

HTML from Home page: