Hide/show block with CSS

Question

A previous developer built a webpage with a woman and numbers on it to click for to show services related to a bodypart. You can see the current page here...

http://dermanaissance.com/nos-solutions/

My issue here is that he built the solution with CSS VS using JS or Jquery. I'm trying to hide the other blocks when a specific block has been clicked using what he's already done but am afraid isn't possible only using CSS.

I'm not quite sure how to tackle this one without using Jquery as this is usually how I would approach this, any ideas?

This is the code right now...

<div id="anchor-1" class="nos-anchor">1
    <span class="nos-block">
        <span class="nos-line">&nbsp;</span>
        <ul>
            <li><a href="/lift-sans-chirurgie/">Lift Sans Chirurgie</a></li>
            <li><a href="/attenuation-des-rides/">Atténuation des Rides</a></li>
            <li><a href="/contour-des-yeux/">Contour des Yeux</a></li>
            <li><a href="/double-menton/">Double-menton</a></li>
            <li><a href="/bajoues/">Bajoues</a></li>
            <li><a href="/relachement-du-cou/">Relâchement du Cou</a></li>
            <li><a href="/ouverture-du-regard/">Ouverture du Regard</a></li>
            <li><a href="/augmentation-du-volume/">Augmentation du Volume</a></li>
            <li><a href="/amelioration-du-teint-de-la-peau/">Amélioration du Teint de la Peau</a></li>
            <li><a href="/acne-actif/">Acné Active</a></li>
            <li><a href="/cicatrice-dacne/">Cicatrices d’Acné</a></li>
            <li><a href="/decollete/">Décolleté</a></li>
            <li><a href="/attenuation-des-cicatrices/">Atténuation des Cicatrices</a></li>
            <li><a href="/photorajeunissement/">Photorajeunissement</a></li>
            <li><a href="/taches-pigmentaires-et-melasma/">
Taches pigmentaires et Mélasma</a></li>
            <li><a href="/couperose-et-rosacee/">Couperose et Rosacée</a></li>
            <li><a href="/varicosites/">Varicosités</a></li>
        </ul>
    </span>
</div>

and the CSS that makes this solution work...

.page-id-9 #main-content .nos-anchor {
position: absolute;
display: block;
z-index: 9;}

.page-id-9 #main-content .nos-anchor .nos-block {
position: absolute;
display: none;}

.page-id-9 #main-content .nos-anchor .nos-block a {
display: block;}

.page-id-9 #main-content .nos-anchor .nos-line {
display: block;
position: absolute;
top: 20px;}

Is there a question here...it sounds like you want us to write this for you...and that's not what SO is for. — Paulie_D
– Paulie_D, Commented Dec 21, 2015 at 20:47
@Paulie_D no I just wanted some guidance if there was something I didn't see on the CSS side, sounds like my original plan (rewrite with JS/Jquery) might be the way, as suggested below. — Emmanuel Henri
– Emmanuel Henri, Commented Dec 21, 2015 at 22:05
@EmmanuelHenri were any of the answers below helpful? If so let us know. — gregdevs
– gregdevs, Commented Dec 22, 2015 at 3:41
@gregdevs yes all 3 solutions are the path I was thinking but finally used something similar to Benneb10 — Emmanuel Henri
– Emmanuel Henri, Commented Dec 22, 2015 at 16:46
Thanks y'all to confirm my doubts, couldn't go on this one without some JS or Jquery — Emmanuel Henri
– Emmanuel Henri, Commented Dec 22, 2015 at 16:47

Benneb10 · Accepted Answer · 2015-12-21 21:07:20Z

1

If you want a pure CSS solution I suggest looking into the Target psuedo element, otherwise -

Here is a pure javascript solution. Just give the divs you are hiding and showing an ID, and call them with the clickable object using onclick="hideShow(sectionID);"

<div style="height:40px; width:40px; background:red;" onclick="hideShow('div1')">
  <div id="div1" style="display:none; background:orange; width:15px; height:15px;"></div>
</div>
<div style="width:40px; height:40px; background:yellow;" onclick="hideShow('div2')">
  <div id="div2" style="display:none; background:green; width:15px; height:15px;"></div>
  <div></div>
</div>
<div style="width:40px; height:40px; background:blue;" onclick="hideShow('div3')">
  <div id="div3" style="display:none; background:purple; width:15px; height:15px;"></div>
  <div></div>
</div>

var currrentElementShowing;

function hideShow(sectionID) {
  if (document.getElementById(sectionID) != currrentElementShowing) {
    document.getElementById(sectionID).style.display = "block";
    if (currrentElementShowing != undefined) {
      currrentElementShowing.style.display = "none";
    }
    currrentElementShowing = document.getElementById(sectionID);
  } else {

  }
}

https://jsfiddle.net/cxjndqzu/

answered Dec 21, 2015 at 21:07

Benneb10

1,4891 gold badge8 silver badges13 bronze badges

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

1 Comment

Emmanuel Henri Over a year ago

Thanks @Benneb10 ended up going with something similar to your suggestion.

Stan Shaw · Accepted Answer · 2015-12-21 20:53:11Z

1

Wow "page-id-9" is pretty terrible naming convention (I know you didn't do it, but MAN!).

So, what I would do is create two CSS classes:

"ToggleClass"
"Active"

You would assign "ToggleClass" to all of your list items. Using CSS, you make "ToggleClass" items that ALSO have the "Active" class display how you would like. "ToggleClass" items WITHOUT the "Active" class would be hidden as you would like.

Then, using jQuery (sorry, but I think it has to be done), make the following function:

$(document).ready(function(){
    $(".ToggleClass").on("click", function(){
        $(".ToggleClass").removeClass("Active");
        $(this).addClass("Active");
    });
});

This event will fire anytime someone clicks a "ToggleClass" element. First, it removes the "Active" class from ALL elements that have "ToggleClass" (this ensures that you won't simultaneously have two elements with the "Active" class). Next, it adds the "Active" class to the element that was clicked.

Leave a comment and let me know how this works for you - Good luck!

answered Dec 21, 2015 at 20:53

Stan Shaw

3,0541 gold badge14 silver badges27 bronze badges

2 Comments

Cruiser Over a year ago

why are you creating a ToggleClass class when jquery's toggleClass() method would work and be unambiguous?

Stan Shaw Over a year ago

@Cruiser ToggleClass would not work since you need to remove the "Active" class from one element - and add it to one element. If you used ToggleClass, it would remove it from the one element that had it - and add it to all of the elements that didn't - which is not the desired result.

gregdevs · Accepted Answer · 2015-12-21 21:11:08Z

1

Having looked at your page, you could apply something like this. You'll have to use pure Javascript or Jquery. Since you mentioned JQuery as your preference:

html

<div>
    <div class="pill">1</div>
</div>
<div>
    <div class="pill">2</div>
</div>

js

$('.pill').click(function(){
    $(this).toggleClass('active')

    if ($(this).hasClass('active')){
     $('.pill').not(this).fadeOut(200)
   }else{
     $('.pill').not(this).fadeIn(200)
   }

});

The idea here is to use Jquery's toggleClass method and to check whether the click element has the active class, and if it does hide the other elements. This should steer you in the right direction

Fiddle

answered Dec 21, 2015 at 21:11

gregdevs

7132 gold badges11 silver badges38 bronze badges

Collectives™ on Stack Overflow

Hide/show block with CSS

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related