Is there a way to streamline the jQuery code provided below?

Question

Is there a way to streamline the jQuery code provided below?

I have programmed 6 buttons and successfully implemented jQuery to display a block of data upon clicking each button. Is there a way to condense the jQuery code? If so, what is the best approach to achieve this?

$("#button1").click(function() {
  $("#text1").show();
  $(".close").show();
  $(".close").click(function() {
    $("#text1").hide();
  });
});

... (repeated for all buttons) ...

});

#header {
  width: 640px;
  height: 480px;
  background-color: grey;
}

... (CSS styling continues) ...

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header">

  <div>
    <div class="block" id="text1">
      ... (HTML structure repeated for all buttons) ...
  </div>
  
  ... (more HTML structure for other buttons) ...

</div>

jquery html css

Answer 1

Answer №1

$("button.button").click(function() {
  $(this).prev('.block').show();
  $(".close").show();
  
});
    


$(".close").click(function() {
    $(".block:visible").hide();
  });

#header {
  width: 640px;
  height: 480px;
  background-color: grey;
}

div button {
  width: 100px;
  height: 100px;
  font-size: 16px;
  margin: 50px;
  float: left;
  cursor: pointer;
}

.block {
  position: absolute;
  background-color: #000;
  width: 640px;
  height: 480px;
  font-size: 14px;
  color: white;
  text-align: center;
  display: none;
  opacity: 0.7;
}

.block h1 {
  margin-top: 160px;
}

.close {
  width: 50px;
  height: 50px;
  border: 2px solid white;
  border-radius: 50px;
  display: none;
  margin-top: -220px;
  margin-left: 560px;
}

.button{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">

  <div>
    <div class="block" id="text1">
      <h1> Button1 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button1" class="button common-class"> Button_1 </button>
  </div>

  <div>
    <div class="block" id="text2">
      <h1> Button2 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button2" class="button common-class"> Button_2 </button>
  </div>

  <div>
    <div class="block" id="text3">
      <h1> Button3 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button3" class="button common-class"> Button_3 </button>
  </div>

  <div>
    <div class="block" id="text4">
      <h1> Button4 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button4" class="button common-class"> Button_4 </button>
  </div>

  <div>
    <div class="block" id="text5">
      <h1> Button5 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button5" class="button common-class"> Button_5 </button>
  </div>

  <div>
    <div class="block" id="text6">
      <h1> Button6 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button6" class="button common-class"> Button_6 </button>
  </div>

  <div>

Add a common class to each button
use this context to tell the clicked button
Use prev() to get the previous div that needs to be shown
use selector .block:visible to select the visible block to hide

Answer 2

$("button.button").click(function() {
  $(this).prev('.block').show();
  $(".close").show();
  
});
    


$(".close").click(function() {
    $(".block:visible").hide();
  });

#header {
  width: 640px;
  height: 480px;
  background-color: grey;
}

div button {
  width: 100px;
  height: 100px;
  font-size: 16px;
  margin: 50px;
  float: left;
  cursor: pointer;
}

.block {
  position: absolute;
  background-color: #000;
  width: 640px;
  height: 480px;
  font-size: 14px;
  color: white;
  text-align: center;
  display: none;
  opacity: 0.7;
}

.block h1 {
  margin-top: 160px;
}

.close {
  width: 50px;
  height: 50px;
  border: 2px solid white;
  border-radius: 50px;
  display: none;
  margin-top: -220px;
  margin-left: 560px;
}

.button{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">

  <div>
    <div class="block" id="text1">
      <h1> Button1 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button1" class="button common-class"> Button_1 </button>
  </div>

  <div>
    <div class="block" id="text2">
      <h1> Button2 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button2" class="button common-class"> Button_2 </button>
  </div>

  <div>
    <div class="block" id="text3">
      <h1> Button3 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button3" class="button common-class"> Button_3 </button>
  </div>

  <div>
    <div class="block" id="text4">
      <h1> Button4 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button4" class="button common-class"> Button_4 </button>
  </div>

  <div>
    <div class="block" id="text5">
      <h1> Button5 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button5" class="button common-class"> Button_5 </button>
  </div>

  <div>
    <div class="block" id="text6">
      <h1> Button6 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button6" class="button common-class"> Button_6 </button>
  </div>

  <div>

Add a common class to each button
use this context to tell the clicked button
Use prev() to get the previous div that needs to be shown
use selector .block:visible to select the visible block to hide

Answer 3

Answer №2

Give this a shot:

$('button').on('click', function() {
    $(this).prev('.section').show();
    $(this).prev('.section').find('.exit').show();
});

$('.exit').on('click', function() {
    $(this).parent('.section').hide();
});

Answer 4

Give this a shot:

$('button').on('click', function() {
    $(this).prev('.section').show();
    $(this).prev('.section').find('.exit').show();
});

$('.exit').on('click', function() {
    $(this).parent('.section').hide();
});

Answer 5

Answer №3

Here's a simple way to achieve the same functionality while keeping the class names intact:

$("button").click(function() {
  if ($(this).is(".close")) $(this).closest('.block').hide();
  else {
    $(this).prev().show();
    $(this).prev().find('.close').show();
  }
});

#header {
  width: 640px;
  height: 480px;
  background-color: grey;
}

div button {
  width: 100px;
  height: 100px;
  font-size: 16px;
  margin: 50px;
  float: left;
  cursor: pointer;
}

.block {
  position: absolute;
  background-color: #000;
  width: 640px;
  height: 480px;
  font-size: 14px;
  color: white;
  text-align: center;
  display: none;
  opacity: 0.7;
}

.block h1 {
  margin-top: 160px;
}

.close {
  width: 50px;
  height: 50px;
  border: 2px solid white;
  border-radius: 50px;
  display: none;
  margin-top: -220px;
  margin-left: 560px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header">

  <div>
    <div class="block" id="text1">
      <h1> Button1 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button1"> Button_1 </button>
  </div>

  <div>
    <div class="block" id="text2">
      <h1> Button2 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button2"> Button_2 </button>
  </div>


  <div>

Answer 6

Here's a simple way to achieve the same functionality while keeping the class names intact:

$("button").click(function() {
  if ($(this).is(".close")) $(this).closest('.block').hide();
  else {
    $(this).prev().show();
    $(this).prev().find('.close').show();
  }
});

#header {
  width: 640px;
  height: 480px;
  background-color: grey;
}

div button {
  width: 100px;
  height: 100px;
  font-size: 16px;
  margin: 50px;
  float: left;
  cursor: pointer;
}

.block {
  position: absolute;
  background-color: #000;
  width: 640px;
  height: 480px;
  font-size: 14px;
  color: white;
  text-align: center;
  display: none;
  opacity: 0.7;
}

.block h1 {
  margin-top: 160px;
}

.close {
  width: 50px;
  height: 50px;
  border: 2px solid white;
  border-radius: 50px;
  display: none;
  margin-top: -220px;
  margin-left: 560px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header">

  <div>
    <div class="block" id="text1">
      <h1> Button1 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button1"> Button_1 </button>
  </div>

  <div>
    <div class="block" id="text2">
      <h1> Button2 </h1>
      <h5> Displays block of elements </h5>
      <button class="close"> Close </button>
    </div>
    <button id="button2"> Button_2 </button>
  </div>


  <div>

Answer 7

Answer №4

To achieve this functionality, you can utilize the following jQuery script:

$("button").on("click", function() {
    $(this).prev().show();
    $(this).prev().find('.close').show();
});

$(".close").on("click", function() {
    $(this).closest('.block').hide();
});

Answer 8

To achieve this functionality, you can utilize the following jQuery script:

$("button").on("click", function() {
    $(this).prev().show();
    $(this).prev().find('.close').show();
});

$(".close").on("click", function() {
    $(this).closest('.block').hide();
});

Answer 9

Answer №5

Perhaps it could be wrapped in a function that can be reused multiple times.

customFunction("button1","text1","close");
customFunction("button2","text2","close");
customFunction("button3","text3","close");

function customFunction(buttonId,textId,closeClass){
  $("#"+buttonId).unbind("click").bind("click",function() {
      $("#"+textId).show();
      $("."+closeClass).show();
      $("."+closeClass).unbind("click").bind("click",function() {
          $("#"+textId).hide();
    });
  });
 }

 // The use of unbind("click").bind("click") helps prevent unnecessary events as mentioned in the feedback

Answer 10

Perhaps it could be wrapped in a function that can be reused multiple times.

customFunction("button1","text1","close");
customFunction("button2","text2","close");
customFunction("button3","text3","close");

function customFunction(buttonId,textId,closeClass){
  $("#"+buttonId).unbind("click").bind("click",function() {
      $("#"+textId).show();
      $("."+closeClass).show();
      $("."+closeClass).unbind("click").bind("click",function() {
          $("#"+textId).hide();
    });
  });
 }

 // The use of unbind("click").bind("click") helps prevent unnecessary events as mentioned in the feedback

Is there a way to streamline the jQuery code provided below?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Updating class on elements in arrays

Unable to display images for Wordpress posts within list items

Customize Nivo LightBox to apply to only one video separately on the page

Utilizing drop-down pagination with Jquery

What are some different methods for avoiding the default submission behavior of a form?

I am looking to continuously update the progress bar as the AJAX responses are being received

What is the best way to handle jQuery events within an AngularJS application?

Retrieve the data stored within an [Object Promise] for further use

What is the best way to expand a scrollbar's width with CSS?

"Utilizing a background image within a component to completely cover the entirety

Tips for effectively using the Susy +pad mixin

The JSON/jquery call to the second div yields an undefined error

Tips for limiting a website to load exclusively within an iframe

Issue encountered while attempting to transfer data via the $.ajax method

How can we prevent extra data from showing up in print when using CSS media for printing?

Creating a website with an iframe that adjusts to different screen sizes

Utilizing Webpack to emulate the @apply functionality of Tailwind CSS and shift away from using @extend in SASS

The alignment of buttons is not defined for ASP buttons and Bootstrap dropdowns

Use Jquery to verify whether a specific Div element does not have any children elements with a particular

Guide to implementing CSS3 transitions with prefixes using JavaScript