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.

Answer 1

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

Answer 2

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> 

Answer 3

You have multiple problems in your code.

document.getElementsByClassName returns a list of elements (AKA 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:

• addEventListener
• getelementsbyclassname
• querySelector
• querySelectorAll
• Less "&" operator
• jQuery hasClass
• jQuery toggleClass

Answer 4

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>