Question 43067 in Html Question posted in
Some basic documentation can be found here.

How to hide / show multiple elements with HTML, CSS and Javascript

I want to create a section similar to apples mac mini section (image below)
Essentially 4 buttons that hide / reveal text beneath.

https://www.apple.com/mac-mini/

(https://i.stack.imgur.com/OomgP.png)

Currently with the code below, when you click again on the same button it disappears, I don’t want this to happen. I’m new to javascript so not sure how to eliminate this / if possible.

Thanks

  <button class="icon1">Button 1</button>
  <button class="icon2">Button 2</button>
<button class="icon3">Button 3</button>
  <button class="icon4">Button 4</button>
  
  <p class="info info1">Toggle 1</p>
  <p class="info info2">Toggle 2</p>
  <p class="info info3">Toggle 3</p>
  <p class="info info4">Toggle 4</p>
</div>



 .info2, .info3, .info4 {
  grid-area: scrn;
  display: none;
}

/* decorative only */
body {
  font-size: 4vmin;
  text-align: center;
}
button {
  font-size: 2.5vmin;
}


$(function() {
    // select the button to click, this can be any element not just a button
    $('.icon1').click(function() {
        // select which info panel to show/hide.
        $('.info1').toggle();
        // hide any info panels that are not info1.
        $('.info').not('.info1').hide();
    });                        
});
$(function() {
    $('.icon2').click(function() {
        $('.info2').toggle();
        $('.info').not('.info2').hide();
    });                        
});
$(function() {
    $('.icon3').click(function() {
        $('.info3').toggle();
        $('.info').not('.info3').hide();
    });                        
});
$(function() {
    $('.icon4').click(function() {
        $('.info4').toggle();
        $('.info').not('.info4').hide();
    });                        
});
Tags:

4

Answers


  1. 0

    You probably want something like this for each button:

    $(function() {
    // select the button to click, this can be any element not just a button
    $('.icon1').click(function() {
        // hide all info panels.
        $('.info').hide();
        // show info panel which belongs to the button.
        $('.info1').show();
    });                        
});
    Login or Signup to reply.
  2. 0

    Instead of using toggle(), use show() instead. toggle means it will show or hide the element. If it’s currently being shown and you call toggle() it will be hidden and the other way around if it’s hidden.

    $('.icon1').click(function() {
  // always show
  $('.info1').show();
  // hide any info panels that are not info1.
  $('.info').not('.info1').hide();
});
    Login or Signup to reply.
  3. 0 
       $(function () {
    // select the button to click, this can be any element 
    not just a button
    $(".icon1").click(function () {
      $(".info1").css("display", "none")
        ? // select which info panel to show/hide.
          $(".info1").toggle()
        : null;
      // hide any info panels that are not info1.
      $(".info").not(".info1").hide();
    });
  });
  $(function () {
    $(".icon2").click(function () {
      $(".info2").css("display", "none")
        ? // select which info panel to show/hide.
          $(".info2").toggle()
        : null;
      $(".info").not(".info2").hide();
    });
  });
  $(function () {
    $(".icon3").click(function () {
      $(".info3").css("display", "none")
        ? // select which info panel to show/hide.
          $(".info3").toggle()
        : null;
      $(".info").not(".info3").hide();
    });
  });
  $(function () {
    $(".icon4").click(function () {
      $(".info4").css("display", "none")
        ? // select which info panel to show/hide.
          $(".info4").toggle()
        : null;
      $(".info").not(".info4").hide();
    });
  });

    With a condition it work in the way i understood u need, but u can find other way with jquery to animate or maybe you can use a library like mo.js or gsap…
    https://api.jquery.com/toggle/ (

    The second version of the method accepts a Boolean parameter. If this parameter is true, then the matched elements are shown; if false, the elements are hidden. In essence, the statement:

    $( "#foo" ).toggle( display );

    is equivalent to:

    if ( display === true ) {
  $( "#foo" ).show();
} else if ( display === false ) {
  $( "#foo" ).hide();

    }
    )
    This is the way toggle is meant to be used

    Login or Signup to reply.
  4. 0

    By your description, you seem to be trying to create an accordion… Which basically is some title that is shown and the content is hidden.

    There is a pretty clear example listed w3schools website.

    There is also an option, if you are targetting HTML 5 capable browsers only without javascript that is illustratedhere

    Hope this helps you… Best regards!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search