Show and hide text on html using javascript

Question

javascript:

function mostrar(order) {
switch (order) {
    case 0:
        $(".hide").removeClass("show");
        $(".mostrar1").addClass("show");
        break;
    case 1:
        $(".hide").removeClass("show");
        $(".mostrar2").addClass("show");
        break;
    case 2:
        $(".hide").removeClass("show");
        $(".mostrar3").addClass("show");
        break;
    case 3:
        $(".hide").removeClass("show");
        $(".mostrar4").addClass("show");
        break;
}
}

html:

<a href="" onclick="mostrar(0);">Leer más</a>
<a href="" onclick="mostrar(1);">Leer más</a>
<a href="" onclick="mostrar(2);">Leer más</a>
<a href="" onclick="mostrar(3);">Leer más</a>
<div class="hide mostrar1">asd1</div>
<div class="hide mostrar2">asd2</div>
<div class="hide mostrar3">asd3</div>
<div class="hide mostrar4">asd4</div>

css:

.hide { display: none;}
.show { display:block!important}

http://jsfiddle.net/dn69d14L/

I´m only trying to show and hide the text.

Can someone explain me why is this not working?

This question should be titled: "... using Jquery". Here you are talking about Jquery techniques. — SaidbakR
– SaidbakR, Commented Dec 1, 2014 at 13:47

epascarello · Accepted Answer · 2014-12-01 13:57:29Z

First your fiddle does not include jQuery so it fails.

Second you do not cancel the click event so the links fire.

Change the links to

<a href="#" onclick="mostrar(0);">Leer más</a>

or

<a href="#" onclick="mostrar(0);return false;">Leer más</a>

or even better attach events with jQuery and use preventDefault()

$(".menu").on("click", "a[data-display]", function (e) {
  e.preventDefault();
  var link = $(this);
  $(".tab-content").addClass("hide");
  $("a.active").removeClass("active");
  link.addClass("active");
  $(".mostrar" + link.data("display")).removeClass("hide");
});

.hide {
    display: none;  
}

.active{ background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu">
  <a href="#" data-display="1">Leer más</a>
  <a href="#" data-display="2">Leer más</a>
  <a href="#" data-display="3">Leer más</a>
  <a href="#" data-display="4">Leer más</a>  
</div>
<div class="tab-content hide mostrar1">asd1</div>
<div class="tab-content hide mostrar2">asd2</div>
<div class="tab-content hide mostrar3">asd3</div>
<div class="tab-content hide mostrar4">asd4</div>

Allan Stepps · Accepted Answer · 2014-12-01 13:44:15Z

0

You need to include a jQuery librairy, or use native JavaScript.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

And, as it's use with a librairy, you need to load your code once the dom is ready:

// Shorthand for $( document ).ready()
$(function() {
    console.log( "ready!" );
    // your code !
});

answered Dec 1, 2014 at 13:44

Allan Stepps

1,0671 gold badge10 silver badges24 bronze badges

1 Comment

Francisco Over a year ago

now i have this error, {"error": "Please use POST request"}! And it refresh me the site after I click the button

Amit Joki · Accepted Answer · 2014-12-01 13:47:49Z

0

You've not included jQuery library but that's one of the problems. When you use jQuery it's better not to use inline-js. Also your function could get simpler.

$('a').click(function(){
   $('.hide').hide();
   $('.mostrar' + ($(this).index() + 1))).show();
});

answered Dec 1, 2014 at 13:47

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Comments

Manolo · Accepted Answer · 2014-12-01 13:50:44Z

0

Try this demo: http://jsfiddle.net/dn69d14L/1/

<a href="javascript:void(0)" onclick="mostrar(0);">Leer más</a>
<a href="javascript:void(0)" onclick="mostrar(1);">Leer más</a>
<a href="javascript:void(0)" onclick="mostrar(2);">Leer más</a>
<a href="javascript:void(0)" onclick="mostrar(3);">Leer más</a>
<div class="hide mostrar1">asd1</div>
<div class="hide mostrar2">asd2</div>
<div class="hide mostrar3">asd3</div>
<div class="hide mostrar4">asd4</div>

and of course, use the JQuery library.

answered Dec 1, 2014 at 13:50

Manolo

26.9k21 gold badges91 silver badges134 bronze badges

Comments

Weafs.py · Accepted Answer · 2014-12-01 13:54:05Z

0

Change your HTML to.

<a href="javascript:mostrar(0)">Leer más</a>
<a href="javascript:mostrar(1)">Leer más</a>
<a href="javascript:mostrar(2)">Leer más</a>
<a href="javascript:mostrar(3)">Leer más</a>
<div class="hide mostrar1">asd1</div>
<div class="hide mostrar2">asd2</div>
<div class="hide mostrar3">asd3</div>
<div class="hide mostrar4">asd4</div>

Fiddle

answered Dec 1, 2014 at 13:54

Weafs.py

23k9 gold badges58 silver badges80 bronze badges

Collectives™ on Stack Overflow

Show and hide text on html using javascript

5 Answers 5

Comments

1 Comment

Comments

Comments

Fiddle

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related