具有垂直选项卡内容的Php阵列

Question

I'm trying to figure out how to Hide One of my side navigation buttons if not content is loaded

(Each section varies from 1-4 tabs per section of the body part and currently have three tabs loaded)

I am using a PHP Array to load all my content for this section of the webpage.

Here is an example of some of my code (stripped down much as I could) Js Fiddle

My first thought is to do and "if" and "else" statement which I've tried from another example from here but I still need to figure out a way to turn off the css for the button just not really sure how to tackle that!

Any help is appreciated and please note I'm newbie to php!

Also here is a link of how the section content loads with the array just to help visually:

http://imgur.com/WRkXzv3

Here is a snippet of my array that's being included into the php file

// #Hips#
$injuries['Hips'] = array(
    "BodyPartLink" => "Hips",
    "TitlePage" => "Hips Injuries & Education",
    "IntroTxt" => "Hips Intro Text Here",
    "SectionTab1" => "",
    "SectionTab2" => "Hip Condition #2",
    "SectionTab3" => "Hip Condition #3",
    "ContentSection" => "Hips Dummy Text Here For Large Text Section"
);

// #Hips  Section Contents TAB 1 #
$Tab1SectionContents['Hips'] = array(
    "Definition" => "<span class='edu-sub-category-txt-bold'>Definition:</span>Lower Back Information coming soon! ",
    "Function" => "<span class='edu-sub-category-txt-bold'>Function:</span>Information coming soon!",
    "Mechanism" => "Mechanism of Injury ",
    "MechanismTxt" => "Information coming soon!",
    "Sign-Symptoms" => "Signs & Symptoms ",
    "Sign-SymptomsTxt" => "Information coming soon!",
    "Etiology" => "Etiology ",
    "EtiologyTxt" => "Information coming soon!",
    "Pero-Treatment" => "Pero Treatment ",
    "Pero-TreatmentTxt" => "Information coming soon!",
    "Other-Treatment" => "Other Treatment ",
    "Other-TreatmentTxt" => "Information coming soon!"
);

// #Hips  Section Contents TAB 2 #
$Tab2SectionContents['Hips'] = array(
    "Definition" => "<span class='edu-sub-category-txt-bold'>Definition:</span>Lower Back -- Phasellus erat sem, molestie vitae turpis et, vehicula facilisis dolor. Mauris ut iaculis eros,     in auctor nibh. In eget nisl tristique elit varius semper. ",
    "Function" => "<span class='edu-sub-category-txt-bold'>Function:</span> Function -- molestie vitae turpis et, vehicula facilisis dolor. Mauris ut iaculis eros,",
    "Mechanism" => "Mechanism of Injury ",
    "MechanismTxt" => "Text for Mechanism",
    "Sign-Symptoms" => "Signs & Symptoms ",
    "Sign-SymptomsTxt" => "Signs & Symptoms ",
    "Etiology" => "Etiology ",
    "EtiologyTxt" => "Etiology ",
    "Pero-Treatment" => "Pero Treatment ",
    "Pero-TreatmentTxt" => "Pero Treatment ",
    "Other-Treatment" => "Other Treatment ",
    "Other-TreatmentTxt" => "Other Treatment "
);

// #Hips  Section Contents TAB 3 #
$Tab3SectionContents['Hips'] = array(
    "Definition" => "<span class='edu-sub-category-txt-bold'>Definition:</span>Lower Back -- Phasellus erat sem, molestie vitae turpis et, vehicula facilisis dolor. Mauris ut iaculis eros,     in auctor nibh. In eget nisl tristique elit varius semper. ",
    "Function" => "<span class='edu-sub-category-txt-bold'>Function:</span> Function -- molestie vitae turpis et, vehicula facilisis dolor. Mauris ut iaculis eros,",
    "Mechanism" => "Mechanism of Injury ",
    "MechanismTxt" => "Text for Mechanism",
    "Sign-Symptoms" => "Signs & Symptoms ",
    "Sign-SymptomsTxt" => "Signs & Symptoms ",
    "Etiology" => "Etiology ",
    "EtiologyTxt" => "Etiology ",
    "Pero-Treatment" => "Pero Treatment ",
    "Pero-TreatmentTxt" => "Pero Treatment ",
    "Other-Treatment" => "Other Treatment ",
    "Other-TreatmentTxt" => "Other Treatment "
); // ## END HIPS ##

Answer 1

You could just do it with Javascript. Check if the div associated with your tab is empty - hence no data/content came through for it. If it is empty, remove it.

$(function(){
    if (!$('.element').html()){
        // If the element is empty, remove it
        $('.element').remove();
    }
});