Question: I wanted to make it as a loop for this ready function but I ended up doing like this: 

```
$(document).ready(function () {

  $('#p1-show').click(function () { $('#p1').show(); });
  $('#p1-hide').click(function () { $('#p1').hide(); });

  $('#p2-show').click(function () { $('#p2').show(); });
  $('#p2-hide').click(function () { $('#p2').hide(); });

  $('#p3-show').click(function () { $('#p3').show(); });
  $('#p3-hide').click(function () { $('#p3').hide(); });

  $('#p4-show').click(function () { $('#p4').show(); });
  $('#p4-hide').click(function () { $('#p4').hide(); });

  //there will be ids' for 300+ show hide

});

```

Answer: 
You can associate the element to be `show()` and `hide()` using custom `data-*` prefixed attribute, which can be retried using `.data(key)`.

Using it you can use Class Selector to bind event handler.

*HTML*

```
 <button class="show" data-target="#p1">show p1<button>
 <button class="hide" data-target="#p1">hide p1<button>

```

*Script*

```
$(document).ready(function () {
    $('.show').click(function () {
        $(this).data('target').show();
    });
    $('.hide').click(function () {
        $(this).data('target').hide();
    });
})

```
Don't use a loop. Use substring matching attribute selectors.

```
$("[id$=show]").on("click", function () {
    $("#" + this.id.replace("-show", "")).show();
}):

$("[id$=hide]").on("click", function () {
    $("#" + this.id.replace("-hide", "")).hide();
}):

```