jQuery show/hide on click in WordPress

3 Views

I have three buttons that change color when you hover (sprites) and I want to use those buttons so that when they are clicked on, different content will display.

I’ve gone through multiple tutorials / boards and nothing seems to work.

Read More

The buttons are displayed as follows: 

<div id="buttons">
<a href="#" id="1"class="des"></a>
<a href="#" id="2"class="brnd"></a>
<a href="#" id="3"class="strt"></a>
</div>

The divs where the content was placed (my last attempt) were as follows: 

<div id="pages">
<div id="div1"><img src="..."></></div>
<div id="div2"><img src="..."></></div>
<div id="div3"><img src="..."></></div>

jQuery—- 

<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</head>

<script type="text/javascript">
$(document).ready(function() {
    $("a").click(function() {
       var id = $(this).attribute("data-id"); // Using a custom attribute.
       $("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
       $(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
    });
});
</script>​​​​

My anchors seem to be wrong. With this setup it just went to the top of the page. When using the anchor #1, #2, or #3 it would go to the div location but it would not hide or show the content. Frustrating.

The sprites are working fine. Now I’m trying to figure out how to make them clickable so that different content will display when each button is clicked (3 divs – under a parent div?). If anyone knows exactly how to do this I will be so thankful.

The content is largely images, and I am using Jupiter theme with a front-end editor so I don’t know if it could be something with that. But nothing seems to be broken on the backend.

Also, if you can point me to a tutorial that will teach me how to make it so they animate in and out when clicked, that would be legit. Thanks again.

Post Views: 3

Related posts

Leave a Reply

5 comments

  1. Check out my fiddle.

    The code you posted had two main problems, confusing jQuery’s data attributes with Javascript id’s, and confusing the CSS selectors for classes (.) and ids (#). Here is the corrected html and javascript:

    HTML

    <div id="buttons">
    <a href="#" data-id="1" class="des">Des</a>
    <a href="#" data-id="2" class="brnd">Brnd</a>
    <a href="#" data-id="3" class="strt">Strt</a>
</div>

<div id="pages">
    <div id="div1"><p>This is 1</p></div>
    <div id="div2"><p>This is 2</p></div>
    <div id="div3"><p>This is 3</p></div>
</div>

    Javascript

    $("#pages div").hide();

$("a").click(function() {
   var id = $(this).data("id");
   $("#pages div").hide();
   $("#div" + id).show();
});

  2. you can Simple Use hide and show
    Here Your Id for the button is Buttons

    $("#ElementId" or ".Class").onClick(function(){
$("#OtherElement" or ".OtherElement").show()/hide()
});

    You can Use .Toggle() to switch between states
    so 

    $("#Buttons").click(function(){
$(".brnd").hide();
$(".des").show();
$(".Start").hide();
});

    You can Also Use $("#Buttons").onclick(function(){ Instead of click depends on Your jquery version

    See the Link May be you want this

  3. Try this:

    check tutorial here http://api.jquery.com/show/

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

 <script>

$(document).ready(function(){
    $("#f,#s,#t").hide();

  $(".des").click(function(){
    $("#f").toggle(); 
  }); 
  $(".brnd").click(function(){
    $("#s").toggle();
  });
    $(".strt").click(function(){
    $("#t").toggle();
  });

});
</script>

    http://jsfiddle.net/9SabV/

    i have updated my answer as you updated your html,script code.

    check this also
    Use # for id and . for class.

    http://jsfiddle.net/mdgd7/

  4. There is only one issue I found in your code ie

    $(".div" + id).show();

    here instead of “.”(dot), you have to use “#”.
    You have to replace it with this:-

    $("#div" + id).show();

    because you are using “id” in “div”, not “class”.

    UPDATE
    You have have to remove this:

    $("#pages div").hide();

    instead you have add this to css file:-

    #pages div{display:none;}

    Here is the updated js script:-

    $(document).ready(function() {
    $("a").click(function() {
       var id = $(this).attr("id"); // Using a custom attribute.
       //$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them
       $("#div" + id).fadeIn(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
    });
});

  5. There are certain issues in you code. First of all you have not added data-id attribute to the anchor tags and tried referring them in you js code. The html5 “data-” attribute is used to store custom data inside the tag.The logic behind this is that any attribute with a “data- prefix” will not be processed and will be rendered as a data element.

    Then the closures that you have added after the image tag are not necessary and syntactically wrong and is an error.

    Here in your case, we can simply handle it with the “id” as there is not much need to use the data-attribute.

    The simplified code will be like,

    HTML

    <div id="buttons">
<a href="#" id="1"class="des">ONE</a>
<a href="#" id="2"class="brnd">TWO</a>
<a href="#" id="3"class="strt">THREE</a>
</div>

<div id="pages">
<div id="div1">IMG 1</div>
<div id="div2">IMG 2</div>
<div id="div3">IMG 3</div>
</div>

    JS

    $("a").click(function() {
   var id = $(this).attr("id");  //retrieving the id
   $("#pages div").hide(); // hiding all elements
   $("#div" + id).fadeIn(500); // showing the required one only
});

    CSS

    #pages div{
    display:none;
}

    Animations : I have added fadein animation. For simple fade in, fade out effects you can use jquery short hand animations like .slideDown() .fadeIn(), .animate(). There are more options available here : http://api.jquery.com/animate/

    However you can add more customized animations using CSS3 animations which are more browser friendly. The criteria to choose is that, if you need more control over the animations and event tracking you can go for jQuery animations and otherwise CSS3 animations works like a charm.