Q:

my existing code is javascript and i want to convert these in jquery?

how can i convert this to jQuery?
openDish("balkandish1")
function openDish(dishName) {
    var i;
    var x = document.getElementsByClassName("city");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    document.getElementById(dishName).style.display = "block";
}

A:

You just need to call hide() and show() on the relevant selectors, like this:
openDish("balkandish1")

function openDish(dishName) {
    $(".city").hide()
    $('#' + dishName).show();
}

A:

Use show() and hide() methods.
openDish("balkandish1");

function openDish(dishName) {
   // get all elements using class selector
   // hide them using `hide()` method
   $(".city").hide();
   // get the element using `id` selector
   // make it visible using `show()` method
   $('#' + dishName).show();
}

openDish("balkandish1");

function openDish(dishName) {
  $(".city").hide();
  $('#' + dishName).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="city">1</div>
<div class="city">2</div>
<div class="city">3</div>
<div class="city" id="balkandish1">4</div>
<div class="city">5</div>
<div class="city">6</div>

