CODEWITHSUNDEEP
javascripthtml
Panagiotis
Panagiotis

Reputation: 21

On Text-Click Show (Function)

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?

Upvotes: 0

Views: 404

Answers (5)

zfrisch
zfrisch

Reputation: 8670

<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/

Upvotes: 1

user1950929
user1950929

Reputation: 874

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>

Upvotes: 0

Karmaxdw
Karmaxdw

Reputation: 163

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

Upvotes: 0

Sammy
Sammy

Reputation: 3099

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

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

more info here:

Upvotes: 0

xengravity
xengravity

Reputation: 3589

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.

Upvotes: 0

Related Questions