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, Mar 10 '14 at 22:57
Yes, use jQuery. Put the hammer and chisel away... we have a jackhammer to make that stone wheel. — CrazyDart, Mar 10 '14 at 22:58

score 2 · Answer 1 · answered Mar 10 '14 at 23:01

2

There is, use jquery like this:

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

answered Mar 10 '14 at 23:01

Matúš Dúbrava

771
5
18

no, i think i didnt implement it correctly, i mean should it start? like: ?? – Marcosdro Mar 10 '14 at 23:22
sure, it is jquery code, you need to wrap it with script tag, and specify when it should be fired as well. – Matúš Dúbrava Mar 10 '14 at 23:23
i edited my original post, you might want to take a look!, thanks in advance – Marcosdro Mar 10 '14 at 23:25
it looks fine, but it will not style your buttons because you are not calling those function you have defined. – Matúš Dúbrava Mar 10 '14 at 23:27
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();}); – Matúš Dúbrava Mar 10 '14 at 23:30
what do you mean by "in your script", you mean at the jquery script? – Marcosdro Mar 10 '14 at 23:37
I mean in your script tag. – Matúš Dúbrava Mar 10 '14 at 23:38
i give up on this, too stupid to accomplish it right now, i think im going to go back with javascript and find a way to get it to work, anyway i thank you for your help and time – Marcosdro Mar 10 '14 at 23:45

ArthurChamz · Answer 2 · 2014-03-10T23:36:43.000

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 '14 at 23:36

answered Mar 10 '14 at 23:03

ArthurChamz

2,039
14
25

how should it start? i mean like: script blak blak blak – Marcosdro Mar 10 '14 at 23:16
i changed my original code for something like you posted and crashed, dont get it yet, sorry – Marcosdro Mar 10 '14 at 23:17
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 (http://www.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: http://stackoverflow.com/questions/547384/where-do-you-include-the-jquery-library-from-google-jsapi-cdn) – ArthurChamz Mar 10 '14 at 23:27
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 – Marcosdro Mar 10 '14 at 23:38

Javascript: Adding style to div on button click

2 Answers2