1

I've made this demo with a script to show/hide some divs by clicking links. http://jsfiddle.net/q10f3zvL/1/

HTML

<div id="link">
<ul>
<li class="link1"><a href="#">Link 1</a></li>
<li class="link2"><a href="#">Link 2</a></li>
</ul>
</div>

<div id="text1">
<p>text1 text1 text1 text1 text1 text1 text1 text1 text1</p>
<p class="link1"><a href="#">Close Text 1</a></p>
</div>

<div id="text2">
<p>text2 text2 text2 text2 text2 text2 text2 text2 text2</p>
<p class="link2"><a href="#">Close Text 2</a></p>
</div>

CSS

#link { background-color:black; display:inline; position:absolute; bottom:0; right:0; width:120px; }
#link li.link1 a:hover, #link li.link2 a:hover { text-decoration:none; border-bottom:1px solid white; color:white; }
#link li.link1 a, #link li.link2 a { text-decoration:none; color:white; }
#text1 { display:none; position:fixed; top:0px; left:0px; width:300px; height:50%; background-color: black; margin: 0px; padding: 10px; color:white; }
#text2 { display:none; position:fixed; top:0px; right:0px; width:300px; height:50%; background-color: black; margin: 0px; padding: 10px; color:white; }
#text1 .link1 a, #text2 .link2 a { color: white; position:absolute; left:40%; right:40%; bottom:20px; }

JS

$(function() { $('.link1').click(function(e) { $('#text1').slideToggle(); });});
$(function() { $('.link2').click(function(e) { $('#text2').slideToggle(); });});

My problem is that I would like the URL remaining clean, without #. Is it possible ?

Guillaume
  • 342
  • 1
  • 9
  • 23
  • 2
    Check this link for your answear: http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 – Jarosław Kończak Jan 25 '15 at 19:31
  • It should be working fine. I mean I removed the # and it worked for me. What is exactly the problem? – skoumas Jan 25 '15 at 19:32
  • I removed the # from the JSFiddle, it seems like it works but there's an error when I close the div. In my real project, it just doesn't work. – Guillaume Jan 25 '15 at 19:36

2 Answers2

3

Yes, you can use:

<a href="">

And you need to use preventDefault() while you click in the link, but you're using click even in the list you may use stopPropagation.

For eg:

$(function() { 
   $('.link1').click(function(e) { 
      e.preventDefault();
      e.stopPropagation(); 
      $('#text1').slideToggle(); 
  });
});
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
3

Yes this is possible.

Just add e.preventdefault(); in your click function before $('#text1').slideToggle();

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
mutebg
  • 82
  • 2