CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Thomas Hutton
Thomas Hutton

Reputation: 803

Button to Display Text

I'm trying to do some transitional text for my website, and I'm trying to have a button to click to transition some text. I can do this with div tags, but with a specific element, I'm not able to.

So here's my HTML code: 

<div class="infoLinks centerlinks">
    <div class="col-xs-12 col-md-12 tips" id="hidetext">
      <button class="btn btn-primary">
            Setup Info
      </button>
        <ul >
            <li>
                <a href="{{var protoHost}}img/NETGEARSetup.pdf" target="_blank" class="showtext">How to setup your Netgear Wireless Router</a>
            </li>
            <li>
                <a href="{{var protoHost}}img/DSLSetup.pdf" target="_blank" class="showtext">How to setup your DSL/CABLE Internet</a>
            </li>
            <li>
                <a href="{{var protoHost}}img/VoIPSetup.pdf" target="_blank" class="showtext">How to setup your Internet with VoIP Phone</a>
            </li>
        </ul>
    </div>
</div>

And here's my CSS: 

#hidetext .showtext {
  color: #ffffff;
  -webkit-transition: color .75s ease-in;
  -moz-transition: color .75s ease-in;
  -o-transition: color .75s ease-in;
  -ms-transition: color .75s ease-in;
  transition: color .75s ease-in;
}
#hidetext:hover .showtext{
  color: #000000;
}

Now when I change the button code to: 

<button class="btn btn-primary" id="hidetext">
   Setup Info
</button>

Now I imagine it's because my button isn't in the same element as my text.

How can I fix this? Thanks.

Upvotes: 0

Views: 61

Answers (2)

Roy
Roy

Reputation: 1977

Completely CSS solution. You can use a hidden checkbox to check for clicks. The label tag can be styled as a button. Clicking on which will actually check and uncheck the checkbox. Then with CSS ~ selector you can select the siblings and style them according to both checked and unchecked state.

#clicker{
  display:none;
}
input#clicker ~ ul .showtext {
  color: #ffffff;
  -webkit-transition: color .75s ease-in;
  -moz-transition: color .75s ease-in;
  -o-transition: color .75s ease-in;
  -ms-transition: color .75s ease-in;
  transition: color .75s ease-in;
}
input#clicker:checked ~ ul .showtext {
  color: #000000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="infoLinks centerlinks">
    <div class="col-xs-12 col-md-12 tips">
      <input type="checkbox" id="clicker" />
      <label for="clicker" class="btn btn-primary" id="hidetext">
            Setup Info
      </label>
        <ul >
            <li>
                <a href="{{var protoHost}}img/NETGEARSetup.pdf" target="_blank" class="showtext">How to setup your Netgear Wireless Router</a>
            </li>
            <li>
                <a href="{{var protoHost}}img/DSLSetup.pdf" target="_blank" class="showtext">How to setup your DSL/CABLE Internet</a>
            </li>
            <li>
                <a href="{{var protoHost}}img/VoIPSetup.pdf" target="_blank" class="showtext">How to setup your Internet with VoIP Phone</a>
            </li>
        </ul>
    </div>
</div>

Upvotes: 2

Bluelevel Communications
Bluelevel Communications

Reputation: 12

In the way you have written the css, the browser searchs for the element within the id hidetext. So if you remove the hidetext id, the code should work fine.

Upvotes: 0

Related Questions