Im trying to build a sorting system with hide/show this is how it looks now (code below)
I have x-amount of div's, they are distinguished by the classes, publications, screen, text & installation.

I have 2 problems/questions.

1. the script is 'inverted'. when i press "#sectionPublication" it hides all div's with the class 'publications'. I want it to hide the once without publications as class.
I tried different ways, last one was replacing
Code:
itemPostsDiv.fadeIn( 400 );
with
Code:
 itemPostsDiv = $('.publications').fadeIn( 400 );
and
Code:
 itemPostsDiv = $('.publications').fadeOut( 200 );
with
Code:
 itemPostsDiv.fadeOut( 200 );
It did not work…

2. when i press eg. "#sectionPublication" and then press sectionScreen i want Publications to be visible and 'screen' to start fade. Now when i press on a btn after i already pressed one all div's become visible so i have to press the ptn twice.
Greets

Code:
var itemPostsDiv;
    $("#sectionPublication").click(function(){
          if ( itemPostsDiv ) {
            itemPostsDiv.fadeIn( 400 );
        itemPostsDiv = null;
          } else {
         itemPostsDiv = $('.publications').fadeOut( 200 );
       
        var $container = $('#container');
      }
  });
    $("#sectionScreen").click(function(){
          if ( itemPostsDiv ) {
            itemPostsDiv.fadeIn( 400 );
        itemPostsDiv = null;
          } else {
        itemPostsDiv = $('.screen').fadeOut( 200 );
        var $container = $('#container');
      }
  });
    $("#sectionText").click(function(){
          if ( itemPostsDiv ) {
            itemPostsDiv.fadeIn( 400 );
        itemPostsDiv = null;
          } else {
        itemPostsDiv = $('.installation').fadeOut( 200 );
        var $container = $('#container');
      }
  });
    $("#sectionInstallation").click(function(){
          if ( itemPostsDiv ) {
            itemPostsDiv.fadeIn( 400 );
        itemPostsDiv = null;
          } else {
        itemPostsDiv = $('.text').fadeOut( 200 );
        var $container = $('#container');
      }
  });