Html,css3, jquery how to create on click event

Question

I want to make a button inside auto generated block to change overflow from hidden to auto.

I created recursive responsive auto-grid in Less, css like this:

.container {
  .container-fixed();
  [class*='col-'] {
    float: right;
    width: 100%;
  }
  .make-grid(@container-xs);
  .make-grid(@container-sm);
  .make-grid(@container-md);
  .make-grid(@container-lg);
}

.container-fixed(@gap: @grid-gap-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left: (@gap / 2);
  padding-right: (@gap / 2);
}

.generate-columns(@container-width;
@number-cols;
@i: 1) when (@i =< @number-cols) {
  .col-@{i} {
    @single-width: @container-width / @number-cols - 0.5;
    width: @i * @single-width; // 800px
  }
  .generate-columns(@container-width;
  @number-cols;
  @i + 1);
}

.make-grid(@container-width) {
  @media(min-width: @container-width) {
    width: @container-width;
    .generate-columns(@container-width, @grid-c);
  }
}

[class*='col-'] {
  text-align: center;
  overflow: hidden;
  height: 250px;
  background: @color-h;
  display: block;
  margin: 1px;
  color: @color-text;
  position: relative;
}

And now I have long text in HTML inside one of blocks no matter which one, eg. col-9 where is part hidden because I used overflow:hidden;.

What I would like to do is to create a button and on click to change from overflow:hidden; to overflow: auto;.

My question is how to do that, to change from hidden to auto, on click and again to return back to previous state on new click.

I tried something like this but that is not good:

Less - >

[class*='col-'] {
  text-align: center;
  overflow: hidden;
  height: 250px;
  background: @color-h;
  display: block;
  margin: 1px;
  color: @color-text;
  position: relative;
  .show {
    overflow: auto;
  }
}

JS - >

var content = document.getElementsByClassName("[class*='col-']");
var button = document.getElementbyID("show");

button.onclick = function() {
    if (content.className == "show") {
        content.className= "";
        button.inerHTML = "Read";
    } else {
        content.className="show";
        button.inerHTML = "Close";
    }
};

html - >

<div class="col-9">
    <a id="button-show">Read</a>
    <script src="js/read.js"></script>
    <p> some long text ........ </p>
 </div>

I hope I am clear enough, what I want to do.

Your onlick function is incorrect - see this question: stackoverflow.com/questions/17633152/… — user3641049
– user3641049, Commented May 14, 2018 at 11:29
Problem is here: "content.className" where content is object array but you trying access without index it should: "content[index].className". Also you have no such className like "[class*='col-']" so you should use querySelectorAll to select like CSS style. — Hanif
– Hanif, Commented May 14, 2018 at 11:46

Lelouch · Accepted Answer · 2018-05-14 11:44:58Z

0

<-- language: lang-javascript -->

$("#button-show").click(function(){
    $(".col-9").toggleClass("show")
})

<-- -->

so whenever you click the button, it will add or remove the class show on your elements with the col-9 classnames

answered May 14, 2018 at 11:44

Lelouch

9707 silver badges19 bronze badges

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

2 Comments

Stormfist Over a year ago

yea but that is only for .col-9, is there a solution for rest columns , or i have to create for col-6, col-12 ... etc. Or there is an uniform code for all generated columns ?

Lelouch Over a year ago

you can just add a classname for your target elements to make it uniform :) let's say <div class="col-9 contents"> and just target it with $(".contents").toggleClass("show")

Sujan Gainju · Accepted Answer · 2018-05-14 11:45:48Z

You should use .toggle() to toggle the contents between show and hide. Here is an example

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(document).ready(function(){
    $("#button-show").click(function(){
        $("#show").toggle();
    });
});

[class*='col-'] {
    text-align: center;
    overflow: hidden;
    height: 250px;
    background: @color-h;
    display: block;
    margin: 1px;
    color: @color-text;
    position: relative;
}


    #show {
        overflow: auto;
        display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-9">
    <a id="button-show">Read</a>
    <p id="show"> some long text ........ </p>
</div>

Jorge Fuentes González · Accepted Answer · 2018-05-14 12:01:47Z

You have multiple problems in your code.

document.getElementsByClassName returns a list of elements (A.K.A. array), so your content.className is wrong as you accesing the array className property (which is non-existant) instead of the className property of each element inside the array. You have to iterate the array and access each element individually. Also, you are not accesing by class, but by selector (There's no class [class*='col-'], but class col-1, col-2, etc...). To select with selectors you have to use querySelector, which selects one element, or querySelectorAll which selects all elements.

Also, to hide an element you don't have to change overflow. overflow is for scrollbars. You have to change the display property to display: none and also as the class show is not a child element, it needs an & character:

[class*='col-'] {
  text-align: center;
  [...CSS THINGYS...]
  position: relative;
  &.show { // Note the & before the dot
    display: none;
  }
}

Your code don't has any jQuery actually. Is plain JS.

Also, the best way to attach events to HTML elements is via addEventListener, so:

var content = document.querySelectorAll("[class*='col-']");
var button = document.getElementbyID("show");

button.addEventListener("click", function() {
    var anyShown = false;
    content.forEach(function(element) {
        if (element.className == "show") {
            anyShown = true;
            element.className= "";
        } else {
            element.className="show";
        }
    });
    if (anyShown) {
        button.inerHTML = "Read";
    } else {
        button.inerHTML = "Close";
    }
});

If you want it in a more jQuery way you can do this, which do the same as above, but way shorter:

$("#show").on("click", function() {
    if ($("[class*='col-']").hasClass("show")) {
        $("#show").html("Read");
    } else {
        $("#show").html("Close");
    }
    $("[class*='col-']").toggleClass("show");
});

Relevant info:

Stormfist · Accepted Answer · 2018-05-14 19:54:14Z

0

I found solution:

JQ:

$(document).ready(function(){
 $("button").click(function(){
  $("p3").toggle();
 });
});

CSS:

[class*='col-'] {
  text-align: center;
  overflow:auto;
  height: 250px;
  background: @color-h;
  margin: 1px;
  color: @color-text;
  position: relative;
  .border-radius(10px);
    p3 {
        margin: 10px ;
        padding: 5px;
        width: 95%;
        text-align: justify;
        display: none; 
        }
}

HTML:

<div class="col-9">
<button>Read</button>
<h1>TITLE</h1>
<p>some tekst.</p>
<p3>Tekst i want to hide ....</p3>
</div>

answered May 14, 2018 at 19:54

Stormfist

53 bronze badges

1 Comment

Stormfist Over a year ago

but with this i have one button that toggle all p3 in every block on same page, and i don't want that i want to have separate button for every block, so this is working but only for one article ...

Collectives™ on Stack Overflow

Html,css3, jquery how to create on click event

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related