Toggle content with a div in html and javascript

Question

Seems simple, but I can't wrap my head around it. I am trying to toggle the content and have it show after clicking on the button div. I've tried writing a javascript function to toggle close and open but can't get it. Any help is appreciated.

            <div class="et_pb_module et_pb_toggle et_pb_toggle_close  et_pb_toggle_0 et_pb_toggle_item">
            <h5 class="et_pb_toggle_title">Content Button</h5>
            <div class="et_pb_toggle_content clearfix">
                <p> Content</p>

            </div> <!-- .et_pb_toggle_content -->
        </div> <!-- .et_pb_toggle -->

Please post your JavaScript attempt, otherwise it appears as if you're asking us to do all the work for you, which this site isn't about — j08691
– j08691, Commented Oct 3, 2017 at 18:39

Akshay Hegde · Accepted Answer · 2017-10-03 18:43:00Z

1

You can use toggle() function, like below :

$('.et_pb_toggle_title').on("click",function(){
   $('.et_pb_toggle_content').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="et_pb_module et_pb_toggle et_pb_toggle_close  et_pb_toggle_0 et_pb_toggle_item">
  <h5 class="et_pb_toggle_title">Content Button</h5>
  <div style="display:none;" class="et_pb_toggle_content clearfix">
    <p> Content</p>
  </div>
</div>

edited Oct 3, 2017 at 18:43

answered Oct 3, 2017 at 18:39

Akshay Hegde

17.1k2 gold badges25 silver badges39 bronze badges

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

1 Comment

kharhys Over a year ago

if you'd like to start with the content hidden add inline style="display:none;" to the div with class et_pb_toggle_content

Jared Bledsoe · Accepted Answer · 2017-10-03 18:43:19Z

1

So you need to have a click event, either inline (inside the tag of the element you want to click)

//Make a unhide function that sets the display to show, then call it using this
onclick="unhide();"

Or, in the JS file you can have an event listener such as follows.

document.getElementById("clickButton").addEventListener("click",function() {
    //Give the hidden element display:none; in the CSS
    document.getElementById("clickButton").style.display = inline;
}

answered Oct 3, 2017 at 18:43

Jared Bledsoe

5595 silver badges15 bronze badges

Comments

Johannes · Accepted Answer · 2017-10-03 18:44:18Z

1

Apart from using regular toggle, you can also use fadeToggle() to have it fade in and out, or slideToggle() to let it appear/disappear animated from/to the top.

$('.et_pb_toggle_title').on("click", function() {
  $('.et_pb_toggle_content').fadeToggle();
});

.et_pb_toggle_content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="et_pb_module et_pb_toggle et_pb_toggle_close  et_pb_toggle_0 et_pb_toggle_item">
  <h5 class="et_pb_toggle_title">Content Button</h5>
  <div class="et_pb_toggle_content clearfix">
    <p> Content</p>
  </div>
</div>

answered Oct 3, 2017 at 18:44

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

Collectives™ on Stack Overflow

Toggle content with a div in html and javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related