CODEWITHSUNDEEP
javascriptjqueryhtmlcss
laurence keith albano
laurence keith albano

Reputation: 1482

How to hide div first in slide toggle and show when click?

How can I hide first the div tag in slide toggle? I tried display:none in my '.accordion_box' and show() it in slideToggle but the problem is it will add a css property which is display block. I'm trying to create a accordion slide from left to right.

$(".slide-toggle").click(function(){
		$(".accordion_box").animate({
			width: "toggle"
		});
	});
#about .about_content .accordion_content {
  font-size: 0;
  min-height: 700px;
  padding-top: 50px;
  text-align: left;
}

#about .about_content .accordion_content .accordion_box, #about .about_content .accordion_content .accordion_toggle {
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
}

#about .about_content .accordion_content .accordion_box {
  background: blue;
  min-height: 200px;
  width: 90%;
}

#about .about_content .accordion_content .accordion_toggle a.slide-toggle {
  display: block;
  width: 50px;
  height: 200px;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
       <div id="about">
            <div class="wrapper">
                <div class="about_content">
                    <h3>About Us</h3>
                    
                    <div class="accordion_content">
                        <div class="accordion_box">

                        </div>
                        <div class="accordion_toggle"><a href="#about" class="slide-toggle"></a></div>
                    </div>
                </div>
            </div>
        </div>

Upvotes: 2

Views: 561

Answers (1)

Michael Rodriguez
Michael Rodriguez

Reputation: 2176

To get this slider to slide from left-to-right as you described, and without making any other changes to your markup, you can set style="display: none" inline on the .accordion_box div and then in your CSS add display: inline-block; to the div selector you have. Try this:

$(".slide-toggle").click(function() {
  $(".accordion_box").animate({
    width: "toggle"
  });
});
#about .about_content .accordion_content {
  font-size: 0;
  min-height: 700px;
  padding-top: 50px;
  text-align: left;
}

#about .about_content .accordion_content .accordion_box,
#about .about_content .accordion_content .accordion_toggle {
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
}

#about .about_content .accordion_content .accordion_box {
  background: blue;
  min-height: 200px;
  width: 90%;
  display: inline-block;
}

#about .about_content .accordion_content .accordion_toggle a.slide-toggle {
  display: block;
  width: 50px;
  height: 200px;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="about">
  <div class="wrapper">
    <div class="about_content">
      <h3>About Us</h3>

      <div class="accordion_content">
        <div class="accordion_box" style="display: none;"></div>
        <div class="accordion_toggle">
          <a href="#about" class="slide-toggle"></a>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 4

Related Questions