CODEWITHSUNDEEP
javascript
Marcosdro
Marcosdro

Reputation: 19

Javascript: Adding style to div on button click

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}

Upvotes: 0

Views: 1691

Answers (2)

ArthurChamz
ArthurChamz

Reputation: 2049

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>

Upvotes: 2

Mat&#250;š D&#250;brava
Mat&#250;š D&#250;brava

Reputation: 801

There is, use jquery like this:

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

Upvotes: 2

Related Questions