CODEWITHSUNDEEP
javascriptjquery
onlineoctopus
onlineoctopus

Reputation: 13

How to show multiple divs with jquery?

I'm trying to use show() to show both an <img> and a <a>

Currently it will only show one or the other, whichever is called last. In the code below it'll be the html(img).show() because it comes after. Doing $('.showimagediv').html(div,img).show(); has the same effect. Trying to combine the two statements into one variable: 

var img = ($('<a />', {href    : this.getAttribute("data-permaLink"), 'class': 'permaLinkDiv'}),$('<img />', {src    : this.getAttribute("data-url"), 'class': 'fullScreenimg'}));

will only result in <img> showing up. Does anyone know how to show both at the same time?

  var imgToggle=false;
  $('.box').on('click', function() {
      var img = $('<img />', {src    : this.getAttribute("data-url"), 'class': 'fullScreenimg'});
      var div = $('<a />', {href    : this.getAttribute("data-permaLink"), 'class': 'permaLinkDiv'});
      if(imgToggle==true){
          $('.showimagediv').html(img).hide();
          imgToggle=false;
      }
      if(imgToggle==false){
          $('.showimagediv').html(div).show();
          $('.showimagediv').html(img).show();

          imgToggle=true;
      }

  })
  $('.showimagediv').on('click', function() {
      var img = $('<img />', {src    : this.getAttribute("data-url"), 'class': 'fullScreenimg'});
      var div = $('<a />', {href    : this.getAttribute("data-permaLink"), 'class': 'permaLinkDiv'});
      if(imgToggle==true){
          $('.showimagediv').html(img).hide();
          divToggle=false;
      }

  })

Upvotes: 0

Views: 55

Answers (1)

Petrashka Siarhei
Petrashka Siarhei

Reputation: 732

You can add or remove css class with display:none to show your divs. It's very simply and a good way.

Example CSS: .hide{display:none;}

$('div').add('img').addClass('hide');  //or 
$('div').add('img').removeClass('hide');

Upvotes: 2

Related Questions