CODEWITHSUNDEEP
javascripthtmlcss
Francisco
Francisco

Reputation: 254

Show and hide text on html using javascript

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?

Upvotes: 0

Views: 1178

Answers (5)

epascarello
epascarello

Reputation: 207501

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>

Upvotes: 1

Weafs.py
Weafs.py

Reputation: 22992

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

Upvotes: 0

Manolo
Manolo

Reputation: 26350

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.

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59232

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();
});

Upvotes: 0

Allan Stepps
Allan Stepps

Reputation: 1067

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 !
});

Upvotes: 0

Related Questions