JS Using data-attributes inside conditionals

Question

I have a bootstrap modal with 3 options users can select. If they choose the 3rd option (Search by service), it takes you to a new panel (#service-box) with a list of service options. I'm trying to add functionality so that when the user clicks once of the services it shows the #service-options panel with locations that offer that service.

I have it hard coded now to show all three locations on the #service-options panel, but I'm trying to figure out a way that I can add an attribute to each service so that when clicked It takes them to #service-options panel with buttons for only the locations with that attribute.

Here is a code pen with what I have so far... https://codepen.io/aaron4osu/pen/poyKvjQ?editors=1010

here are the two panels

        <div id="service-box" class="service-box toggleSearch" style="display: none;">

            <div class="row mb20">
                <p class="close sidebarClose"> Back <i class="fas fa-angle-right"></i></p>
            </div>
            
            <div class="row">
                <div class="col-xs-6 uc">
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 1,Location 3" href="#">Service 1</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 1,Location 2" href="#">Service 2</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 1,Location 2" href="#">Service 3</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 1,Location 2" href="#">Service 4</a></p>
                    
                </div>

                <div class="col-xs-6">
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 3" href="#">Service 5</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 2, Location 3" href="#">Service 6</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 1,Location 2, Location 3" href="#">Service 7</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 1,Location 2" href="#">Service 8</a></p>
                </div>
            </div>
             
            <p class="close sidebar Close"> Back <i class="fas fa-angle-right"></i></p>

        </div><!-- close service-box -->

        <div id="service-options" class="service-box toggleSearch" style="display: none;">

            <div class="row mb20">
                <p class="close sidebarClose"> Back <i class="fas fa-angle-right"></i></p>
            </div>
            
            <div class="row">
                <div class="col-xs-12 uc">
                    <p><a class="btn btn-lg btn-outline-dark btn-block" href="">Location 1</a></p>
                    <p><a class="btn btn-lg btn-outline-dark btn-block" href="">Location 2</a></p>
                    <p><a class="btn btn-lg btn-outline-dark btn-block" href="">Location 3</a></p>
                </div>
            </div>
             
            <p class="close sidebarClose"> Back <i class="fas fa-angle-right"></i></p>

        </div><!-- close service-box -->
        $(document).ready(function () {
          $(".btn-toggle").click(function () {
            //var destination = $(this).attr("href");
            var destination = $(this).data("destination");
            $(".search-box").slideUp("slow");
            $(destination).slideDown("slow");
          });

          $(".close").click(function () {
            $(".search-box").slideDown("slow");
            $(".toggleSearch").slideUp("slow");
          });
        });

Any help would be greatly appreciated.

Answer 1

Based on your requirement, you can define an event to catch when a service button is clicked.

You will get the value from there: $(this).data('locations') .

Since you have multiple locations, you can split them by , character and cut the white space ahead.

Lastly, inside service-options modal, you select all location buttons and filter them based on the text inside. You hide all of them first, then showing the matched locations after filtering.

$('.service.btn-toggle').click(function () {  
    var locations = $(this).data('locations').split(',').map(function (location) {
      return location.trim();
    });

    $('#service-options .btn-block').hide().filter(function () {
       return locations.indexOf($(this).text().trim()) > -1;
    }).show();
});