skip to Main Content

I have a series of divs on a page with unique ID’s that all begin with the word "business".
I would like them all to be hidden by default on page load, then each one should be shown as the links across the top are clicked.

Buttons

<div class = "btn-wrapper">
<a href="#business-50" class="btn" target="_self">Business 50</a>
</div>
<div class = "btn-wrapper">
<a href="#business-100" class="btn" target="_self">Business 100</a>
</div>
<div class = "btn-wrapper">
<a href="#business-250" class="btn" target="_self">Business 250</a>
</div>

Divs

<div id="business-50" class="block wrapper block-11-2-three-cols-fix-tariffs-with-img"></div>
<div id="business-100" class="block wrapper block-11-2-three-cols-fix-tariffs-with-img"></div>
<div id="business-250" class="block wrapper block-11-2-three-cols-fix-tariffs-with-img"></div>

I have limited access to the source html and css, and can only change div# or run a script. I can create custom html blocks and code my own buttons, but because there is someone less code savvy who will be adding/removing buttons in the future, I would love to work within the html structure as it currently shows.

At the suggestion of another thread I have tried in my override file:

div[id^="business"] {display:none;}
div[id^="business"]:target {display:block;}

But I may not be understanding the use of the selector.

I have also tried to modify something like:

$(document).ready(function(){
    $(".test").click(function(){
        $("#showme").show();
       $("#divsthatIwanttohide").hide();

    });

});
<a href="#" class="test">Say Hi</a>
<div id="showme">Howdy</div>

But I got a bit turned around with the unique divs they were using.

2

Answers


  1. Add a click event listener to each button using jQuery

    $(document).ready(function() {
      $(".btn").click(function(e) {
        e.preventDefault(); 
        var targetId = $(this).attr("href"); 
        $(targetId).show(); 
      });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    Login or Signup to reply.
  2. simply :

    div[id^="business"]:not(:target) 
      { 
      display : none;
      }
    <a href="#business-50"  class="btn" >Business 50</a>
    <a href="#business-100" class="btn" >Business 100</a>
    <a href="#business-250" class="btn" >Business 250</a>
    
    <hr>
    
    <div id="business-50"  > div business   50....</div>
    <div id="business-100" > div business  100....</div>
    <div id="business-250" > div business  250....</div>

    In case of a Tabs interface:

    const 
      aLink   = document.querySelectorAll('a[href^="#business"]')
    , divLink = document.querySelectorAll('div[id^="business"]')
      ;
    aLink.forEach( (Aelm, indx) => 
      {
      let divId = Aelm.getAttribute('href').slice(1)
        ;
      Aelm.onclick =_=>
        {
        aLink.forEach( (a,i) => a.classList.toggle('select', i===indx ))
        divLink.forEach( div => div.classList.toggle('select', div.id===divId ))
        }
      })
    a[href^="#business"].select   { font-weight: bold; color:red  }
    div[id^="business"]:not(.select)   { display:none;  }
    <a href="#business-50"  class="select" >Business 50</a>
    <a href="#business-100" >Business 100</a>
    <a href="#business-250" >Business 250</a>
    <hr>
    <div id="business-50"  class="select" > div business   50....</div>
    <div id="business-100" > div business  100....</div>
    <div id="business-250" > div business  250....</div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search