Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to toggle between show/hide for divs when anchor link is clicked

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.

Tags:

2

Answers


  1. 0

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

    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