JavaScript - problem

Ojej...
Czyli która wersja działa? Ta pierwsza czy ta druga?
Ta pierwsza, co do zasady działania wygląda ok. Tzn, jest stylistycznie brzydka, przekombinowana i zrobiona nie tak jak Bozia kazała, ale powinna działać.

Natomiast ta druga poprawnie funkcjonować nie będzie. Za każdym razem wywoływany będzie tylko pierwszy if. W środku ifa, przypisujesz do zmiennej searhDisplay stringa "none". I ten string jest zwracany. Javascript interpretuje niepuste stringi jako wartość true. I dlatego pierwszy if przechodzi. A do else if nigdy nie dojdzie. Mógłbyś ten warunek wywalić i tak samo by działało, a właściwie to nie działało.

A teraz po kolei co jest nie tak z tym pierwszym kodem:

Dlaczego w ogóle używasz do porównania stringów (łańcuchów znaków)? Masz dwa stany, okienko jest otwarte, albo nie. Tutaj wystarczyłoby porównanie dwóch wartości true i false. Kiedy jest zamknięte, to do zmiennej przypisujesz false, kiedy otwarte to true. Jakoś tak:

var searhDisplay = false;  

function searhClick() {
    if (searhDisplay) {
        document.getElementById('searhInput').style.display = 'none';
        searhDisplay = false;
    } else {
        alert(searhDisplay);
        document.getElementById('searhInput').style.display = 'inline-block';
        searhDisplay = true;
    }
}

Już jest krócej i bardziej przejrzyście.
Druga sprawa, dwa razy przeszukujesz drzewko dokumentu w poszukiwaniu elementu od id searhInput. Wystarczy zrobić to raz i przypisać do zmiennej:

var searhDisplay = false;  
var searhInput = document.getElementById('searhInput');

function searhClick() {
    if (searhDisplay) {
        searhInput.style.display = 'none';
        searhDisplay = false;
    } else {
        alert(searhDisplay);
        searhInput.style.display = 'inline-block';
        searhDisplay = true;
    }
}

A tak w ogóle, takie rzeczy - dodawanie niezbyt skomplikowanych styli - powinno się robić za pomocą manipulacji klasą elementu, a nie wciskać tam javascript. Warto oddzielić wygląd od zachowania

var searhDisplay = false;  
var searhInput = document.getElementById('searhInput');

function searhClick() {
    if (searhDisplay) {
        searhInput.classList.remove('open');
        searhDisplay = false;
    } else {
        alert(searhDisplay);
        searhInput.classList.add('open');
        searhDisplay = true;
    }
}

i w css

#searhInput {
  display: none;
}

#searhInput.open {
  display: inline-block;
}

A tak się szczęśliwie składa, że istnieje już wbudowana funkcja w javascript (właściwie to DOM), która pozwala na włączanie i wyłączanie klas. Czyli classList.toggle(). Kod może się nam skrócić jeszcze bardziej

var searhInput = document.getElementById('searhInput');

function searhClick() {
    searhInput.classList.toggle('open');
}

Jest jeszcze kilka rzeczy które można usprawnić. Wywalić ten onClick z elementu DOM i przypisać do eventlistenera. Zamienić te vary na const, w końcu mamy 2019. Dodać klasę do inputu, i stylować po klasie, a nie po id. Ale to już drobiazgi.
I po angielsku "szukać" piszemy "SEARCH" a nie "SEARH", bo chyba o to chodziło

A i tak cały ten chaos zastąpilem jedna linijka jquary fadeToggle i się chowa i znika Ale dzięki jak wrócę do domu zobaczę co tam napisałeś:)

Nie używaj jQuery żeby zrobić toggle, zamiast tego możesz użyć np. metody toggle z https://developer.mozilla.org/en-US/docs/Web/API/Element/classList, najlepiej w ogóle nie używaj jQuery, API przeglądarki Ci wystarczy.

A na grzyba ci ta dodatkowa zmienna?

function searhClick() {
  var stan = document.getElementById('searhInput').style.display;
  if (stan=="inline-block") {stan = "none";} else {stan = "inline-block";}
}