JS Using data-attributes inside conditionals

JavaScript
1

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

        <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.

2

Hi @aaron4osu, first of all I’d suggest to specify IDs or dedicated data atrributes here, rather than the text content of the elements you want to toggle; for instance, you might introduce some generic data-filter / data-value relations:

<div class="row">
    <div class="col-xs-6 uc">
        <p><a class="..." data-destination="#service-options" data-filter="location-1 location-3" href="#">Service 1</a></p>
        <p><a class="..." data-destination="#service-options" data-filter="location-1 location-2" href="#">Service 2</a></p>
        <p><a class="..." data-destination="#service-options" data-filter="location-1 location-2" href="#">Service 3</a></p>
        <p><a class="..." data-destination="#service-options" data-filter="location-1 location-2" href="#">Service 4</a></p>

    </div>

    <div class="col-xs-6">
        <p><a class="..." data-destination="#service-options" data-filter="location-3" href="#">Service 5</a></p>
        <p><a class="..." data-destination="#service-options" data-filter="location-2 location-3" href="#">Service 6</a></p>
        <p><a class="..." data-destination="#service-options" data-filter="location-1 location-2 location-3" href="#">Service 7</a></p>
        <p><a class="..." data-destination="#service-options" data-filter="location-1 location-2" href="#">Service 8</a></p>
    </div>
</div>

...

<div class="row">
    <div class="col-xs-12 uc">
        <p data-value="location-1"><a class="..." href="">Location 1</a></p>
        <p data-value="location-2"><a class="..." href="">Location 2</a></p>
        <p data-value="location-3"><a class="..." href="">Location 3</a></p>
    </div>
</div>

Then in your JS, you can toggle the corresponding elements inside the destination like so:

$('[data-filter]').click(function () {
  var $destination = $(this.dataset.destination)
  var values = this.dataset.filter.split(' ')

  $destination.find('[data-value]').each(function () {
    // Hide elements that have a data-value that is not
    // included in the data-filter values
    this.hidden = values.indexOf(this.dataset.value) === -1
  })
})

Here’s a pen:

1 Like
3

m3g4p0p that’s exactly what I was looking for. Thank you!!!

1 Like
4

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