PagerSlidingTabStrip - replacing fragments within viewpager

Question

SCOPE

I am using the [PagerSlidingTabStrip][1] and I have two tabs (A and B) and a ListFragment in each tab containing 6 list items (1-6) which, when clicked, will transition to another Fragment (C).

PROBLEM

After 4 days of searching StackOverflow/Google and trying various methods I consistently end up with one or two results (excluding various errors).

1.) Using a TextView in a Fragment, the TextView String would populate between the ActionBar (Test) and Tab A.

2.) I would click on a list item and it would replace the ListFragment with a blank white Fragment (say for C).

SOURCE

MainActivity

public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Initialize the ViewPager and set an adapter
    ViewPager pager = (ViewPager) findViewById(R.id.pager);
    pager.setAdapter(new MainPagerAdapter(getSupportFragmentManager()));

    // Bind the tabs to the ViewPager
    PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
    tabs.setShouldExpand(true); // expand tabs to fill parent
    tabs.setViewPager(pager);

}

public class MainPagerAdapter extends FragmentPagerAdapter {

    private final String[] TITLES = {"A", "B"};

    public MainPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return TITLES[position];
    }

    @Override
    public int getCount() {
        return TITLES.length;
    }

    @Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                return new A();
            case 1:
                return new B();
        }
        return null;
    }
}

Class A/B

public class A extends ListFragment {

    ListView list;

    final String[] items = {"1", "2", "3", "4", "5", "6"};

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.layout_a, container, false);
        list = (ListView) rootView.findViewById(android.R.id.list);
        ArrayAdapter<String> adapter = new ArrayAdapter<>(getActivity(), android.R.layout.simple_list_item_1, items);
        list.setAdapter(adapter);

        return rootView;
    }

    @Override
public void onListItemClick(ListView l, View v, int position, long id) {
    super.onListItemClick(l, v, position, id);
    // this is where I get stuck...using switch/case has resulted in the 2 results above
    }
}

Any help would be GREATLY appreciated as I've been stuck on this for almost a week and it is maddening!