Question

New to this, so sorry if it’s really silly. My problem is as follows. We have been given a list of anchors, some are html and some are pdf. These are grouped into a div #anchors which is to be hidden on document ready. Then two buttons with a choice to show either html links only or pdf links only and the href$ selector must be used. I can’t get anything to show. Code as follows:

$(document).ready(function(){
    alert("Anchors hidden");
    $('#anchors').hide();
});

$(document).ready(function(){
  $('#htmlLinks').click(function(event){
    alert("html pressed");
    $("a[href$=html]").show();
  });
});

The alert shows, but none of the links are listed. I’ve tried loads of things. What am I doing wrong? I’ve tried $('#anchor a[href$=".html"]').show(); and various other things with different combinations of quotation marks, I’ve tried creating a new div and outputting to that, but I’m getting nowhere. I can get the whole div to display, but not a selection of it. Any help would be much appreciated.

Many Thanks.

Answer 1

You’re hiding the whole div here:

$('#anchors').hide();

Instead, hide the anchors inside…the ones you want to show, like this:

$('#anchors a').hide();

If you .show() a child that still in a hidden parent you’ll get no effect, which is what you’re seeing. Instead do a .show() on the hidden element directly, and leave the parent visible.