0

I have used a collapsible button which shows only on mobile and tablet screen. But when the "Show Less" button on mobile is tapped, the content on desktop also hides which I do not want. How do I fix that?

function myFunction() {
    var x = document.getElementById("myDIV");
    console.log(x.style.display);
    if (x.style.display === "none" || !x.style.display) {
      x.style.display = "block";
      document.getElementById("moreButton").innerText = "Show Less";
    } else {
      x.style.display = "none";
      var a = document.getElementById("servicenav");
      document.getElementById("moreButton").innerText = "Show More";
      a.click();
    }
  }
  window.onresize = function(event) {
    if(event.currentTarget.outerWidth >= 1026){
        console.info("showing");
        $("myDIV").show();
    }else{
        console.info("hiding");
        $("#myDIV").hide();
    }
    
}
<div id="myDIV">
 <button class="get-started-btn morebutton" id="moreButton" onclick="myFunction()">Show More</button>
</div>
nhk96
  • 120
  • 9
Huzaifa Shah
  • 140
  • 9
  • 3
    Welcome to Stack Overflow! Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). Please first look into media queries – mplungjan Oct 06 '20 at 05:26
  • Is your `#myDIV` element missing? – llui85 Oct 06 '20 at 05:45
  • No its there, the button is placed inside the #myDIV – Huzaifa Shah Oct 06 '20 at 05:52
  • no, there is no `
    ` in your code!
     – Mister Jojo Oct 06 '20 at 14:36
  • Does this answer your question? [Hide div element when screen size is smaller than a specific size](https://stackoverflow.com/questions/13476267/hide-div-element-when-screen-size-is-smaller-than-a-specific-size) – shreyasm-dev Oct 06 '20 at 17:17

0 Answers0