Using Jquery How to Show and Hide Different Div's Onclick Event

Using JQuery how to show and hide different div's onClick event

I'll try my shot.

---

EDIT:
After second though, to avoid global variable use it's better to do the following

$(document).ready(function() {
        $("#toggle_value").click((function(){
        var counter = 0;
        return function()
        {
           $("#div" + counter).hide("fast");
           counter = (counter % 3) + 1;
           $("#div" + counter).show("fast");
        }
        })());
});

jQuery onclick show / hide multiple divs - Extra div hidden

The issue is because you hide all child divs, not just the top level ones, and you never re-show the children. To fix this change the selector to:

$('#tabShows > div').hide();

Note the use of the > selector. That being said, you can improve the logic by using common classes on all relevant elements, using CSS to hide content instead of JS, and using a elements for the click events for better accessibility. Try this:

$('#clicks').on('click', 'a', function(e) {  e.preventDefault();  $('#tabShows > div').hide();  var target = $(this).attr('href');  $(target).show();});

#tabShows > div { display: none; }#tabShows #tab1 { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="clicks">  <a href="#tab1">Test 1</a>  <a href="#tab2">Test 2</a>  <a href="#tab3">Test 3</a>  <a href="#tab4">Test 4</a>  <a href="#tab5">Test 5</a></div><br /><br />
<div id="tabShows">  <div id="tab1">    <div>test 1 default = show</div>  </div>  <div id="tab2">test 2</div>  <div id="tab3">test 3</div>  <div id="tab4">test 4</div>  <div id="tab5">test 5</div></div>

Hide/Show Div on button click using Jquery

<div>
<input type="button" id="btn" class="btn btn-default" value="click me">
</div>

<div id="Create" style="display:none">
Hello
</div>

@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(document).ready(function () {
    $("#btn").click(function () {
        $("#Create").toggle();
    });
});
</script>
}

jQuery onclick show / hide multiple divs

The problem with your code is you are repeating the same block of code for each element, instead you can use some common attributes to reduce the separate handlers like

First we add a common class to all the tab elements like tab, then another class tab-content is added to all the content elements, this will help us to select those elements easily.

Then the logic we are looking for is, we need to show only that content whose id matches with the clicked tab(the id of the content is <clicked tab id> + 'show').

Now we can have a single click handler which will target all the tab elements, in which we concatenate its id with 'show' to find the content to be shown and displays it via .show() then we hides all other tab-content elements.

Also note that we can cache the jQuery object for tab-content for later use.

var $contents = $('.tab-content');$contents.slice(1).hide();$('.tab').click(function() {  var $target = $('#' + this.id + 'show').show();  $contents.not($target).hide();});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id="tab1" class="tab">Test 1</div><div id="tab2" class="tab">Test 2</div><div id="tab3" class="tab">Test 3</div><div id="tab4" class="tab">Test 4</div><div id="tab5" class="tab">Test 5</div>
<br /><br />
<div id="tab1show" class="tab-content">  test 1 default = show</div>
<div id="tab2show" class="tab-content">  test 2</div>
<div id="tab3show" class="tab-content">  test 3</div>
<div id="tab4show" class="tab-content">  test 4</div>
<div id="tab5show" class="tab-content">  test 5</div>

Jquery On Click, Hide and Show div Multi Items

The whole point of classes, compared to IDs, is that they don't have to be unique and can be reused, avoiding you to repeat your code.

const $allGoos = $(".goo");

$(".myDiv").click(function() {
  $allGoos.show();
  $(this).find('.goo').hide();
});

.myDiv {
  border: 1px solid gray;
  margin: 10px;
}

.goo {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: 90%;
  height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myDiv">
  <div class="goo"></div>
  Test1
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test2
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test3
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test4
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test5
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test6
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test7
</div>

Jquery: Hide and show div based on click function of 2 buttons

Simply change the css() function to toggle() function. css() function will not toggle.

$("#leather").click(function() {  var id = $(this).attr("id");  $("#pages div#gumboots").css("display", "none");  $("#pages #" + id + "").toggle();});$("#gumboots").click(function() {  var id = $(this).attr("id");  $("#pages div#leather").css("display", "none");  $("#pages #" + id + "").toggle();});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><button type="button" id="leather">leather</button><button type="button" id="gumboots">gumboots</button><div id="pages">  <div id="leather" class="mydivshow" style="display: none;">    <div class="row">      <div class="col-lg-12 text-center">        <h4>Advanced Search Leather</h4>      </div>      <!-- Colours -->      <div class="col-lg-12">        <h4>Colours</h4>      </div>    </div>  </div>  <div id="gumboots" class="mydivhide" style="display: none;">    <div class="row">      <div class="col-lg-12 text-center">        <h4>Advanced Search Gumboots</h4>      </div>      <!-- Colours -->      <div class="col-lg-12">        <h4>Colours</h4>      </div>
    </div>  </div></div>

Show and hide different divs on clicks on different buttons

You can achieve what you need with much less code by using common classes to group content by behaviour. You can use data attributes where required to store custom metadata in an element.

In the following example all buttons use the same event handler. The differences come simply from the data attribute on the button used to change the selector. The code just removes the active class from all relevant elements before applying it to the target.

let $blocks = $('.block-card');

$('.filter-btn').on('click', e => {
  let $btn = $(e.target).addClass('active');
  $btn.siblings().removeClass('active');
  
  let selector = $btn.data('target');
  $blocks.removeClass('active').filter(selector).addClass('active');
});

body {
  background-color: red;
  color: white;
}

.block-card {
  display: none;
}

.block-card.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="filter">
  <button class="filter-btn active" data-target="#block-1">1</button>
  <button class="filter-btn" data-target="#block-2">2</button>
  <button class="filter-btn" data-target="#block-3">3</button>
  <button class="filter-btn" data-target="#block-4">4</button>
</div>

<div class="block">
  <div class="block-card active" id="block-1">Block 1</div>
  <div class="block-card" id="block-2">Block 2</div>
  <div class="block-card" id="block-3">Block 3</div>
  <div class="block-card" id="block-4">Block 4</div>
</div>

jQuery onclick hide/show divs in menu

You can do this :

$(function() {
    var curPage="";
    $("#menu a").click(function() {
        var page = $(this).attr("data-page");
        if($("#"+page).css("display") != "none"){
            $("#"+page).slideUp();
        }else{
            $(".content").slideUp();
            $("#"+page).slideToggle();
        }
    });
});

http://jsfiddle.net/zL4h2dsL/3/

How to show hidden div onclick of button and hide when not in focus using JS

you can use this code :

function openCardsList() {
    let window = document.getElementById("anchor-cards-list");
    window.style.display = "block";
  }
  function hideDiv(){
    let window = document.getElementById("anchor-cards-list");
    window.style.display = "none";
  }

and add onclick event to parent div

div onclick="hideDiv()" style="height: 100vh;">
  <div class="collapse" id="anchor-cards-list">Lorem Ipsum</div>
</div>

---

Related Topics