Hide Remaining Elements

Hide Remaining Elements

I have 28 'elements (div id's)' and I need to show a different 'start state' based on which 'one' of 'twelve' different buttons is selected by the user (e.g. if the user clicks on button 1, 15 of the 28 elements are shown, if the user clicks on  button 2, 20 of the 28 divs are shown and so on. I'm using the following jquery code to reset the starting state each time a different button is clicked on... so I'm basically re-showing any previously hidden divs with:
  1. $("#answerCardHolder div:hidden").show();
but I'm wondering if there a better way to hide any elements which don't need to be shown (based on the button the user clicks on) i.e. is there a better way to write this line?

  1. $("#a16, #a17, #a18, #a19, #a20, #a21, #a22, #a23, #a24, #a25, #a26, #a27, #a28").hide();
I basically want to hide any divs that have no .text() value, which in the example below would be #16 to #28.

  1.     $("#one").click(function() {
            $(".numberCard, .answerCard, .multiplierCard").css({
                "background-color": "#ff0000"});
            $(".multiplierCard p").text("1").show();
           
            $("#answerCardHolder div:hidden").show();     
           
            $("#a1 p, #a2 p, #a3 p, #a4 p, #a5 p").text("1");
            $("#a6 p, #a7 p").text("2");
            $("#a8 p").text("3");
            $("#a9 p").text("4");
            $("#a10 p").text("5");
            $("#a11 p").text("6");
            $("#a12 p").text("7");
            $("#a13 p").text("8");
            $("#a14 p").text("9");
            $("#a15 p").text("0");
           
          
            $("#a16, #a17, #a18, #a19, #a20, #a21, #a22, #a23, #a24, #a25, #a26, #a27, #a28").hide();

        });