Change DIV contents using jQuery when link clicked

Question

Thank you, in advance, for those who answer =)
I\'m trying to switch between divs when i click the links with the respective class (as follow on the code bellow). It works f

Answer 1

I think that the best way to fix it is this:

HTML:

<div class="sidebar1">
    <ul class="nav">
      <li><a class="cont info" href="#">Info</a></li>
      <li><a class="cont gallery" href="#">Gallery</a></li>
      //<li><a class="cont projects" href="index.php?o=projects">Projects</a></li>
      <li><a class="cont contacts" href="#">Contacts</a></li>
    </ul>
</div>
  <div class="content" id="info">
    <h1>Info</h1>
    <p>Info content ...</p>
</div>
<div class="content" id="gallery">
    <h1>Gallery</h1>
    <p>Gallerycontent ...</p>
</div> <!-- it's the same for the other links -->

jQUERY:

$(document).ready(function(){
$(".content").hide();

$(".cont").click(function() {
if ($(this).hasClass("info")){ $("#info").slideToggle(500); }
if ($(this).hasClass("gallery")){ $("#gallery").slideToggle(500); }
if ($(this).hasClass("projectos")){ $("#projectos").slideToggle(500); }
if ($(this).hasClass("contactos")){ $("#contactos").slideToggle(500); }
    // $(".content").slideToggle(500);
});
});

All I've done was to change cont id to cont class. Remember that two or more elements can't have the same ID, so only the first element will be considered.

Ah! And as lmsteffan told, in JQUERY you're using "galerias" and in HTML "gallery". Please check it.

Answer 2

$('#cont').click(function(e) {
  e.preventDefault();
  var idToSlide = $(this).attr('class');
  $('#' + idToSlide).slideToggle(500);
});

Answer 3

This is working fine for u:

  $(document).ready(function () { 
            $(".content").hide();
        });


function test(Idpassing) {
            var clsname = Idpassing[0].id;


            if (clsname == "cont") { $("#info").slideToggle(500); }
            if (clsname == "gal") { $("#gallery").slideToggle(500); }
            if (clsname =="projectos") { $("#projectos").slideToggle(500); }
            if (clsname == "conta") { $("#Contacts").slideToggle(500); }
        }

        <div class="sidebar1">
            <ul class="nav">
              <li><a id="cont" class="info" href="#" onclick="test($('#cont'))">Info</a></li>
              <li><a id="gal" class="gallery" href="#" onclick="test($('#gal'))">Gallery</a></li>
              <li><a id="conta" class="contacts"  href="#" onclick="test($('#conta'))">Contacts</a></li>
            </ul>
        </div>
          <div class="content" id="info">
            <h1>Info</h1>
            <p>Info content ...</p>
        </div>
        <div class="content" id="gallery">
            <h1>Gallery</h1>
            <p>Gallerycontent ...</p>
        </div>
        <div class="content" id="Contacts">
            <h1>Contacts</h1>
            <p>Contactscontent ...</p>
        </div>

Send the data using id

Answer 4

May be this work.

$(document).ready(function(){
    $(".content").hide();

    $("#cont").click(function() {
    if ($(this).hasClass("info")){ $(".info").slideToggle(500); }
    if ($(this).hasClass("gallery")){ $(".gallery").slideToggle(500); }
    if ($(this).hasClass("projects")){ $(".projectos").slideToggle(500); }
    if ($(this).hasClass("contacts")){ $(".contactos").slideToggle(500); }
        // $(".content").slideToggle(500);
    });

    });

Answer 5

Rui,

I would do something like this:

HTML:

<div class="content">
    <h1 id="content-title"></h1>
    <p id="content-text"></p>
</div>

JQUERY:

$(".cont").click(function() {
if ($(this).hasClass("info")){
   $("#content-title").text("Your text goes here"); //Set some text in content-title element
   $("#content-text").text("Your text goes here"); //Set some text in content-text element 
   $(".content").slideToggle(500); //Show the content element class

}
});

Answer 6

The classes in your HTML code should be the same as those in JQuery code :

gallery != galerias,

etc.