Hide Div show another using LI href

need a little help in hiding/showing divs. I know there were a few posts on here but none that specifically targeted what I am looking to do.

My code is below. What I would like to do is have the corresponding DIV display when it is clicked on from the leftColum LI.

<div id="leftColumn">
      <ul>
        <li> <a href="#">Painting</a> </li>
        <li> <a href="#">Landscaping</a> </li>
        <li> <a href="#">Kitchen</a> </li>
        <li> <a href="#">What's next?</a> </li>
      </ul>
   </div>
  <div id="rightColumnPainting">
        <ul>
          <li> <a href="painting.html"></a><img src="./img/house1.jpg" width="100" height="100" /> </li>
          <li> <a href="painting.html"></a><img src="./img/house1.jpg" width="100" height="100" /> </li>
          <li> <a href="painting.html"></a><img src="./img/house1.jpg" width="100" height="100" /> </li>
          <li> <a href="painting.html"></a><img src="./img/house1.jpg" width="100" height="100" /> </li>
        </ul>
      </div>
      <div id="rightColumnLandscaping">
        <ul>
          <li> <a href="painting.html"></a><img src="./img/paint1.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/paint2.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/paint3.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/paint4.jpg" /> </li>
        </ul>
      </div>
      <div id="rightColumnKitchen">
        <ul>
          <li> <a href="painting.html"></a><img src="./img/yard1.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/yard2.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/yard3.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/yard4.jpg" /> </li>
        </ul>
      </div>
  <div id="rightColumnNext">
        <ul>
          <li> <a href="painting.html"></a><img src="./img/house1.jpg" width="100" height="100" /> </li>
          <li> <a href="painting.html"></a><img src="./img/house2.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/house3.jpg" /> </li>
          <li> <a href="painting.html"></a><img src="./img/house4.jpg" /> </li>
        </ul>
    </div>

Answers


For this to work you need to hide the div ul elements, and then use the :target selector to display: block:

#leftColumn {
    display: block;
}

#leftColumn ul {
    display: block;
}

div ul {
    display: none;
}

div:target ul {
    display: block;
}

You do, of course, need to ensure that the #leftColumn ul is visible first; and, further, requires that the a elements by which you're navigating within the page has the appropriate id within it's href attribute:

<ul>
    <li><a href="#rightColumnPainting">Painting</a></li>
    <li><a href="#rightColumnLandscaping">Landscaping</a></li>
    <li><a href="#rightColumnKitchen">Kitchen</a></li>
    <li><a href="#rightColumnNext">What's next?</a></li>
</ul>

JS Fiddle demo.


Need Your Help

Cannot find the API to submit a survey response to surveymonkey

api survey surveymonkey

I need to submit a survey response from my own mobile app. The user will be shown a survey to fill for which i can pull the survey questions and answer choices using the get_survey_details api call...

What should I do while I'm waiting for the build / the tests / the database migrations to run?

testing build focus

As best-behaved as I try to be about keeping my unit tests disconnected from the database, etc. etc, it still seems inevitable that my day will be interrupted by small regular enforced breaks while I