.load() in jQuery and odd behaviour

Question

I'm implementing a simple jQuery script on a website that loads content from one section of a webpage into the 'display container' on the same webpage.

The content i'm loading is multiple div's which are all wrapped in an outer <div> which has been hidden from view.

I have the display container div and several links the use can click on. Each time they click a link, the appropriate matched content is loaded in to the display container.

My jQuery.

---

$(".Prod-Link-2").click(function(e){

e.preventDefault();
$("#ITARGET").empty();
$("#ITARGET").prepend('<img id="theImg" src="http://sensing-precision.com/wp-content/uploads/2015/12/page-loader.gif" />');

$("#ITARGET").load($(this).attr('href'));

}); 

Menu HTML

---

<div class="MPD">
<div class="Option">
<a class="Prod-Link-2" id ="DEF" href ="/electricalelectronic-products/alf150 #specTable" ><p>SPECIFICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #COMPARE" ><p>ALF150 v ALF150+</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #FEAT" ><p>APPLICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #ACCESSORY" ><p>ACCESSORIES</p></a>
</div>
</div>

The Target div

---

<div class="Info-Target" id="ITARGET">

</div>

So my problem is this all works except one of the links.

My hidden div has 4 content divs and 2 tables inside which all have their own IDs. SPECIFICATIONS grabs the #specTable, APPLICATIONS grabs the #FEAT div etc etc.. ACCESSORIES will not load the #ACCESSORY div at all and I don't know why. The script initializes and the page loader gif is displayed, but then instead of displaying the content I'm trying to load.. it displays nothing.

The hidden area format

---

<div style="display: none;">

<div id ="COMPARE"> some content </div>
<table id="specTable"> some content </div>
<div id ="ACCESSORY"> some content </div>

etc ....

</div>

For test purposes

---

<div id="ACCESSORY">
<p> This is the accessory div </p>
</div>

No matter what I change the name to in the ID tag and the links href attr, it will not load (I even tried making a new div with a different name and moving the div up to top of the hidden content area thinking it was maybe a loading issue), but if I change the links href attr to one of the tables or a different div such as #FEAT or #specTable.. it loads that fine.

My gut feeling is that there is some qwirk with jQuery and .load() that i'm unaware of.

Answer 1

This problem may be CSS related. I've just taken a look at a couple of products, and wherever the content includes lists, the display appears blank because of extremely excessive white-space.

This CSS rule seems to be the culprit:

.Features li:before  { content: url(#)!important; }