Javascript: Adding style to div on button click

Question

function showwLess() {
    button.style.display="block";
    idTab5.style="height:250px;overflow:hidden;font-size:14px;line-height:20px;";
    button2.style.display="none";
}

That is the code for my button, idTab5 is the div to be styled, I was wondering if there was a better way to apply the style to the div than

idTab5.style="

EDIT:

got this..

    <script>
var button2 = document.getElementById("button2");
var button = document.getElementById("button");
var idTab5 = document.getElementById("idTab5");
function showwMore() {
    $("#button").hide();
    $("#idTab5").css({height: "250px",
                   overflow: "hidden",
                   font-size: "14px",
                   line-height: "20px;"});
    $("#button2").show();
}

function showwLess() {
    $("#button").show();
    $("#idTab5").css({height: "250px",
                   overflow: "hidden",
                   font-size: "14px",
                   line-height: "20px;"});
    $("#button2").hide();
}
</script>

and

{if $product->description|count_characters:true > 350 } {* full description *}

<div id="idTab5" style="overflow:hidden;height:250px;font-size:14px;line-height:20px;">{$product->description}</div>
<input id="button" type="button" style="margin-top:5px;font-size:12px;line-height:16px;color:white; width:120px;background:#4e3248;border:none;height:30px;border-radius:5px;" value="Mostrar +" onclick="showwMore()">
<input id="button2" type="button" style="margin-top:5px;display:none;font-size:12px;line-height:16px;color:white; width:120px;background:#4e3248;border:none;height:30px;border-radius:5px;" value="Mostrar -" onclick="showwLess()">
{else}
<div id="idTab5" style="overflow:hidden;height:250px;font-size:14px;line-height:20px;line-height:16px;">{$product->description}</div>
{/if}

You could always learn jQuery and cut your code down significantly — Trent
– Trent, Commented Mar 10, 2014 at 22:57
Yes, use jQuery. Put the hammer and chisel away... we have a jackhammer to make that stone wheel. — CrazyDart
– CrazyDart, Commented Mar 10, 2014 at 22:58

Matúš Dúbrava · Accepted Answer · 2014-03-10 23:01:33Z

2

There is, use jquery like this:

$("#idTab").css({
    height: 250,
    overflow: "hidden",
    //and so on...
});

answered Mar 10, 2014 at 23:01

Matúš Dúbrava

7991 gold badge7 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Marcosdro Over a year ago

no, i think i didnt implement it correctly, i mean should it start? like: <script> and end </script> ??

Matúš Dúbrava Over a year ago

sure, it is jquery code, you need to wrap it with script tag, and specify when it should be fired as well.

Marcosdro Over a year ago

i edited my original post, you might want to take a look!, thanks in advance

Matúš Dúbrava Over a year ago

it looks fine, but it will not style your buttons because you are not calling those function you have defined.

Matúš Dúbrava Over a year ago

if you want to style them right away (though it does not seem to be the case) just do this call in your script: $(function() {showwMore();});

|

ArthurChamz · Accepted Answer · 2014-03-10 23:36:43Z

2

Use jquery. If your elements have id's:

function showwLess() {
    $("#button").show();
    $("#idTab5").css({height: "250px",
                   overflow: "hidden",
                   font-size: "14px",
                   line-height: "20px;"});
    $("#button2").hide();
}

It's really very easy to get used to it, if you want a starting point I highly recommend CodeSchool.

EDIT

Add this to your html to include the jquery library. I still recommend you check my links:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

edited Mar 10, 2014 at 23:36

answered Mar 10, 2014 at 23:03

ArthurChamz

2,04914 silver badges25 bronze badges

4 Comments

Marcosdro Over a year ago

how should it start? i mean like: script blak blak blak

Marcosdro Over a year ago

i changed my original code for something like you posted and crashed, dont get it yet, sorry

ArthurChamz Over a year ago

Well, you first need to include the actual library. I believe it will be faster if you follow the CodeSchool link I provided, or try a tutorial (w3schools.com/jquery/jquery_install.asp), than me explaining everything here. Going further on how to get started with jquery would be a subject for another question (like this one: stackoverflow.com/questions/547384/…)

Marcosdro Over a year ago

i did see it, tried to implement it, and still doesnt work, im almost 100% sure that im doing something wrong at the code since im pretty new at this think and dont know much, i edited my main post in chase you would like to see. thanks anyway

Collectives™ on Stack Overflow

Javascript: Adding style to div on button click

2 Answers 2

8 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related