CODEWITHSUNDEEP
jqueryhtml
Rui Mendes
Rui Mendes

Reputation: 21

Change DIV contents using jQuery when link clicked

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 for the first link, but not for the others. What am I doing wrong, and what other 'function' can i use to do this?

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("projects")){ $("#projects").slideToggle(500); }
if ($(this).hasClass("contacts")){ $("#contacts").slideToggle(500); }
    // $(".content").slideToggle(500);
});

});

HTML

<?php $type = $_GET['o']; ?>

<div class="sidebar1">
    <ul class="nav">
      <li><a id="cont" class="info" href="#">Info</a></li>
      <li><a id="cont" class="gallery" href="#">Gallery</a></li>
      //<li><a id="cont" class="projects" href="index.php?o=projects">Projects</a></li>
      <li><a id="cont" class="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 -->

On a later note.. How can I do something similar to this, using the links to say what '$type' to include, using only one 'content' div?
'Projects' link is commented as example.

<div class="content">
    <?php include($type . ".txt"); ?>
</div>

Upvotes: 0

Views: 3534

Answers (6)

acg
acg

Reputation: 513

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

}
});

Upvotes: 0

User279_1
User279_1

Reputation: 113

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

Upvotes: 0

acg
acg

Reputation: 513

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.

Upvotes: 0

Meraj
Meraj

Reputation: 426

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

    });

Upvotes: 0

lmsteffan
lmsteffan

Reputation: 870

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

gallery != galerias,

etc.

Upvotes: 1

Arindam
Arindam

Reputation: 998

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

Upvotes: 0

Related Questions