0

I need a little help here and please excuse me for newbie programming.

I have this code javascript

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
}

and this is how inherit it on my html

<a href="#" onclick="toggle_visibility('something');"><center>Show something</center></a>

<div id="something" style="display:none;">
<p>something</p>
</div>

what it does is when someone clicks on "show something" , the text in the div will be showed up. I have 2 problems and hope you could guide me.

The place on the site where it will be placed is not in the beginning and when is clicked the href="#" it takes the viewer scrolled up on the beginning of the site.

Note that i want just a text-click. Not a button.

Second and optional is : Could i do anything to add jQuery on the below code so that it has a little animation on click-showing?

Thom Wiggers
  • 6,938
  • 1
  • 39
  • 65
Panagiotis
  • 21
  • 4

5 Answers5

1

<center> has been deprecated meaning that it's no longer wise to use. It's best to adjust position in your CSS file. It's also advised not to use Inline styles like style="" on your elements, you should place those in the CSS File as well. It's not advised to use the onclick event but rather add an event listener.

Here's a JSFiddle for the plain Javascript version of how you can achieve these things: https://jsfiddle.net/u8zc6yfo/2/ 

window.onload = function () {
var clickableItems = document.getElementsByClassName("clickable");
for (var i = 0; i < clickableItems.length; i++) {
    clickableItems[i].addEventListener("click", function () {
        toggle_visibility(this.id);
    });
}

}

function toggle_visibility(id) {
    var getToggleItem = document.getElementById(id).getAttribute("data-toggle");
    var e = document.getElementById(getToggleItem);
    (e.style.display != "block") ? e.style.display = "block" :    e.style.display = "none";
}

And HTML:

<div class="wrapper">
<span id="toggleshowsomething" data-toggle="something" class="clickable center">Show something</span>

<div id="something">
    <p>something</p>
</div>

And CSS:

.wrapper {
width: 300px;
margin:0px auto;
}
.clickable {
color: blue;
cursor: pointer;
}
.clickable:hover {
color: purple;
}
#something {
display: none;
}
}

What this, altogether does, is any item assigned with the class "clickable" will have an event listener added to it. When that item is clicked, since you want it to toggle a different element, you can store it in data-toggle:"whateverIdYouWantToPointTo" - It then, through a ternary statement which is: (boolean check)? true : false ; determines whether the item with the id listed in data-toggle is hidden. I did this because your code would not take into account if there were no display property set. 

(e.style.display != "block") ?  //says to check if display is not shown as block
//this is what to do if it returns true
e.style.display = "block";
//show element
:
//this is what to do if it returns false
e.style.display = "none";
//hide element
}

Then for the sake of completeness I did a JQuery mockup which can be found: https://jsfiddle.net/o6wozosu/

    window.onload = function() {
    $(".clickable").on("click", function() {
    var useId = $(this).attr("data-toggle");

    $("#" + useId).fadeToggle();
    });
    }

It's the same thing. You can use the fadeToggle() method to perform an animation in and out, .toggle(); just changes the display abruptly. There is also .animate({}) which takes different css variables and allows smooth animation through JQuery. You can read the documentation on that here: http://api.jquery.com/animate/

zfrisch
  • 8,474
  • 1
  • 22
  • 34
  • About the css i should have done this as your way and not with inline thats true! About the code: Works Perfectly (hadnt heard this about the onclick functions and events) although doesnt have the animation of jquery. You believe i should not use these animations on my code?? Thanks both for your time and advice. :) – Panagiotis Apr 01 '15 at 00:06
  • It's not to cut you down or anything, I definitely use inline styles and onclick when I'm mocking things up. It's sometimes easier than jumping from file to file! It's unfortunately just not recommended because it can cause clutter in the code itself. If you have 20k lines of code, finding the one style="" can be a pain, especially if you didn't write it. You can definitely have animation in your code. Near the bottom of my post I give you a JQuery version of what I had done and also pointed you in the direction of .animate(); and some JQuery toggle functions. – zfrisch Apr 01 '15 at 00:11
  • http://jsfiddle.net/u2nw1Lvj/1/ Here's a small idea of how the animate method works! – zfrisch Apr 01 '15 at 00:31
0

While frowned upon you can change your anchor tag to the following to avoid the anchor link going to the top of your page:

<a href="javascript:;" onclick="toggle_visibility('something');"><center>Show something</center></a>

The ideal scenario is to not use an anchor tag if you aren't actually linking to something.

xengravity
  • 3,501
  • 18
  • 27
0

instead of "#" use javascript:void(0)

<a href="javascript:void(0)" onclick="toggle_visibility('something');"><center>Show something</center></a>

more info here:

Community
  • 1
  • 1
Sammy
  • 3,059
  • 4
  • 23
  • 32
0

Well you can go about this in multiple ways. Since you are using Javascript, you may either change the opacity of the container of the text you want displayed, or (if you have jQuery) you may show() and hide() what you want displayed.

Example using jQuery:

function show_hide() {
var tracker = 1;
    $('.div_name').click(function() {
        if (tracker == 1) {
            $('.div_name a').show();
            tracker = 2;
        }
        else if (tracker == 2) {
            $('.div_name a').hide();
            tracker = 1;
        }
    });
}

Make sure to call show_hide(); in document.ready

Karmaxdw
  • 163
  • 1
  • 4
  • 13
0

Since you want to use jQuery anyway, I would suggest the following:

JS:

$(function(){ //execute this when dom is ready
    $("#toggle").click(function(e){ // like 'onclick', this function is called then the element with the id 'toggle' is clicked
        $("#something").fadeToggle(300); // toggle visibility with a 300ms fade animation
        e.preventDefault(); //prevent the default click action, in this case scrolling to top 
    });
});

HTML:

<a href="#" id="toggle"><center>Show something</center></a>
<div id="something" style="display:none;">
<p>something</p>
</div>

Don't forget to include jQuery in your HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
user1950929
  • 874
  • 1
  • 9
  • 17
  • Thanks for your time. Would it be nice but i couldnt make it to work..http://jsfiddle.net/vzmnJ/3554/ – Panagiotis Mar 31 '15 at 23:20
  • in a real html page it would work, in jsfiddle you have to reference jquery from the dropdown on the left side and not in a ` – user1950929 Mar 31 '15 at 23:27