in collection page how arrange a filter in one line

[premsai]

this is my page i need a filters in one line and without box for example take this

[Mehran_Ali]

Hi @premsai 

Can you share the store URL and Password if it password protected 

[premsai]

Hi Mehran,

Thanks for your revert. Please find website link below:

Kurtas – My Store

Currently the filters are showed on left pane and are static. However we would wish to have it in a way similar to 'sort' wherein when customer clicks on it then only filters open on the left pane and then customer can select filters. In a way the filters are not fixed on left pane and shows only when someone clicks on filters. Please see reference image as below:

Many Thanks!

[Mehran_Ali]

Hi @premsai 

You can achieve this kind of accordion using jQuery or javascript 
You just need to follow these steps:

1) Go to the Online Store ->  themes
2) click on three dots and Select Edit Code
3) Find a theme.liquid file

4) in that file find the body closing tag 

</body>

5) before that tag past that code with script tag 

<script>

jQuery(document).ready(function ($) {
    // Add toggle buttons and set initial states
    $(".sidebarBlock-heading").each(function () {
        const $header = $(this);
        const $toggleButton = $('<span class="accordion-toggle">+</span>'); // Create the toggle button
        $header.append($toggleButton);

        // Ensure the content is hidden by default
        const $content = $header.next(".sidebarBlock-content");
        $content.hide();

        // Handle click events on the header
        $header.on("click", function () {
            const isOpen = $content.is(":visible");

            // Optional: Collapse other sections for single open behavior
            $(".sidebarBlock-content").slideUp();
            $(".accordion-toggle").text("+");

            // Toggle the clicked section
            if (isOpen) {
                $content.slideUp();
                $toggleButton.text("+");
            } else {
                $content.slideDown();
                $toggleButton.text("−");
            }
        });
    });
});

</script>

6) save the file and reload the page:

The Result Will be like

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going

[premsai]

Hi Mehran,

Thanks for above. What we are looking for is explained in below:

The left side pane of filter should be visible only when someone click on filter. 

before someone click on filter dropdown:

After when someone click on filter dropdown:

left pane is visible only when someone click on filter. Hence this way the left pane space is not always blocked with filter.

Thanks