0

I am new to JS and I am trying to figure out how can I do a simple JS script in which when a user touch/click on a div another div opens. Thanks in advance. If someone could help me I would be really grateful.

George Smith
  • 415
  • 8
  • 25
  • 1
    Do you use simple JS or some framework? Have you any code right now? Some jsfiddle with your work will be helpful – zucker Oct 02 '15 at 08:03
  • what do you mean by a div opening? – Bit68 Oct 02 '15 at 08:07
  • yes, you need to share your code snippet first. Without the code, I guess you want to programatically generate a click on an element. This is jquery version : http://stackoverflow.com/questions/2847185/how-to-programmatically-trigger-the-click-on-a-link-using-jquery. this is non-jquery version: http://stackoverflow.com/questions/906486/how-can-i-programmatically-invoke-an-onclick-event-from-a-anchor-tag-while-kee – Hammer Oct 02 '15 at 08:10

2 Answers2

0

This may give you idea on what you want...

HTML

<div style="background-color: red">
 <a href="#" id="panel1">Panel1</a>
 <p id="pm1" style="display:none;">Message Hello From Panel1</p>
</div>

<div style="background-color: Blue">
 <a href="#" id ="panel2">Panel2</a>
 <p id="pm2" style="display:none;">Message Hello From Panel2</p>
</div>

JQUERY

$('#panel1').click(function(){

 $("#pm1").show(1000);
 $("#pm2").hide(1000);

});

$('#panel2').click(function(){

 $("#pm1").hide(1000);
 $("#pm2").show(1000);

});
Sam Teng Wong
  • 2,379
  • 5
  • 34
  • 56
0

You can make use of.target pseudo-class. For this define next CSS rules:

HTML:

<div class="product">
  <img src="http://placehold.it/100x100"/>
  <a href="#shoes">Show Shoes</a>
</div>

<div class="product-highlight" id="shoes">
  <p>These are the shoes</p>
</div>

CSS:

#shoes {
    display: none; /* hide by default */
}
#shoes:target, /* and show either if class show is present (on click) */
#shoes.show {  /* or location hash matches id "shoes" */
    display: block;
}

and in JS you would add class show:

$(document).ready(function() {

  $('.product-highlight').hide();

  $('a[href$=shoes').click(function() {
    $('#shoes').addClass('show');
  });

});

When redirecting from index page you would also need to set a hash #shoes:

$(document).ready(function() {

  $('a[href$=shoes]').click(function() {

    window.location.href= 'http://sample.com/products.php/#shoes';

  });
});

Refer This page

or

$(document).ready(function(){
    $(".Test2").hide();
    $(".Test1").show();

    $('.Test1').click(function(){
        $(".Test2").slideToggle();
    });
});

WORKING FIDDLE

Community
  • 1
  • 1
Ivin Raj
  • 3,448
  • 2
  • 28
  • 65
  • I've tried to modify the script but I came to a dead end. Can you throw a look at what I've done and tell what I am doing wrong. I would be very grateful and I apologize for losing your time. Thanks in advance. JS Fiddle link ---> http://jsfiddle.net/fu2k5sch/2/ – George Smith Oct 02 '15 at 09:29