HELP! SHOW/HIDE Div with CSS issue

HTML & CSS
1

hey guys - first post - hoping you can help. I’m trying to show and hide a div - i’d like an arrow that when clicked rotates 90 degrees to point down. and while i have the show hide working, it’s

a) not pointing to the right
b) not rotating when clicked
c) I’d like the checkbox to be an image or an icon
d) I’m really trying to avoid the use of JavaScript bc it continues to give me a conflict in Avada
e) I have to use the div class category_filter_box categoryfilter asp_sett_scroll because that is the class of the div I hope to hide uses that class

any chance one of you rock stars have ever tackled this type of css event?

I’d be CRAZY grateful for some insight here.

<!DOCTYPE html>
<html>
<head>
<title>CSS Toggle</title>
<style>
  /* Initially hide the div */
  .category_filter_box.categoryfilter.asp_sett_scroll {
    display: none; /* or visibility: hidden; */
    /* Add any other styling you want for the div */
    border: 0px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    /* Example for scrolling if content is too large */
    max-height: 200px; /* Adjust as needed */
    overflow-y: auto;
  }

  /* Style the button (optional) */
  button {
    padding: 10px 20px;
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 30px;
  }
</style>
</head>
<body>

<button id="filter-toggle">FILTERS</button>

<div class="category_filter_box categoryfilter asp_sett_scroll">
  <p>Filter options:</p>
<p>SOME COPY WILL BE HERE THAT IS TIED TO THE TOGGLE BUTTON</p>
</div>

<script>
  const toggleButton = document.getElementById('filter-toggle');
  const filterDiv = document.querySelector('.category_filter_box.categoryfilter.asp_sett_scroll');

  toggleButton.addEventListener('click', () => {
    if (filterDiv.style.display === 'none') {
      filterDiv.style.display = 'block'; // Or filterDiv.style.visibility = 'visible';
      toggleButton.textContent = 'FILTERS';
    } else {
      filterDiv.style.display = 'none'; // Or filterDiv.style.visibility = 'hidden';
      toggleButton.textContent = 'FILTERS';
    }
  });
</script>

</body>
</html>
2

You could just use the details and summary element and no javascript at all.

Here is a simpler version without animation to show the very basic action.

3

thank you for the response Paul - It works for sure - but once again, when I drop it into the avada environment - while it works to hide, i won’t work to show that class i specified.

I’m using an add-on - AJAX search pro and the functionality that they have in the system works great - the design team wants to move the location of the filter toggle and it can’t be done, so i was trying to create a new show/hide toggle to use for that class - and it’s just not working.

thank you again for the insight - locally it works perfectly, but no luck once i upload the items into the backend. Super frustrating!

4

If it helps here’s your code but tweaked to work as your hide and show was not correct.

It may be that we need to see your finished page complete in order to see where you are going wrong or whether its a limitation of your site builder (which I’m assuming avada is a site builder of sorts).

1 Like
5

That is amazing man! Thank you so much! I will give it a try and see what I can do. You are the best! Truly appreciated!

1 Like
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.