I need h2 elements to close at small screen sizes

Question

I'm redesigning my websites, adding Bootstrap and jQuery. Each section of my articles begins with code that looks like this:

<section id="introduction"><h2 class="h2Article" id="a1" data-    toggle="collapse" data-toggle="collapse" data-target="#b1"><span class="Article"><span class="label label-primary"><small><span class="only-collapsed glyphicon glyphicon-chevron-down"></span><span class="only-expanded glyphicon glyphicon-remove-sign"></span></small> Introduction</span></span></h2>
  <div class="divArticle collapse in article collapse in article" id="b1">

When I preview a page, I can click on a heading (h2) to make it close. Clicking on it a second time opens it again.

It works perfect, but I'd like to modify it so that when someone views the page in a mobile device, everything is CLOSED by default. The user would then choose a particular h2 heading and click on it to read that section.

Does anyone know how I can do that?

The simplest way would be to presumably create some kind of style, like this:

@media all and (max-width: 450px) {    
.h2Article { close; } 
}

But I don't know what CSS command to replace "close" with. Of course, I need a style that would allow the visitor to both close and open it by clicking on the header.

If it can't be done this way, can you suggest another strategy? I was going to use Wikipedia as an example, because its mobile pages used to be set up like this, but I just discovered that they changed it.

You need to alter the jqery probably, not the CSS. You haven't posted any relative css or jquery.. so it's difficult to help. — Scott, Feb 15 '16 at 02:42

score 1 · Accepted Answer · edited May 23 '17 at 12:30

1

You may try to use CSS property display/visibility. Change the display to none for display or hidden for visibility.

.h2Article { 
   diplay: none;
}

or
.h2Article { 
   visibility: hidden;
}

When it is clicked, using Jquery/Javascript to change the property from none to block or hidden to visible. For comparison of the properties, you may refer to this reference

I hope this help. thankyou

This is screenshot from the wikipedia site. each click trigger the class to change the CSS property display from none to block.

edited May 23 '17 at 12:30

Community

1
1

answered Feb 15 '16 at 02:50

Hendra Halim

22
1
5

Sorry, I guess I did a poor job of explaining what I'm trying to do. The header (h2) should actually ALWAYS be visible. I just want to make the text inside
– Feb 15 '16 at 03:04
@DavidBlomstrom Wikipedia also using property display for the content. You may use the jQuery to help you [add](https://api.jquery.com/addclass/) and [remove] (https://api.jquery.com/removeclass/) the class from the content tag (your inside the
tag). For your
tag, you may use jQuery to bind the click action to
tag so it can trigger the add/remove class for your content.
– Hendra Halim Feb 15 '16 at 07:02

Blag · Answer 2 · 2016-02-15T03:00:54.637

code snippet :

function f(elem) {
  if ($(elem).parent().find(".divArticle").is(":visible"))
    $(elem).parent().find(".divArticle").css("display", "none");
  else
    $(elem).parent().find(".divArticle").css("display", "block");
}

@media all and (max-width: 768px) {
  .divArticle {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div>
  <h2 onclick="f(this)">hello</h2>
  <div class="divArticle">I'm an article</div>
</div>

for the CSS, this will hide your div on small screen :

@media all and (max-width: 768px) {    
    .divArticle { display : none; } 
}

With a Jquery that call something like that :

$(element).is(":visible");

And use this to switch between you displayed/hidden

I need h2 elements to close at small screen sizes

2 Answers2

tag). For your

tag, you may use jQuery to bind the click action to

tag so it can trigger the add/remove class for your content.