1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Javascript drop down section with plus minus buttons

Discussion in 'JavaScript' started by madmn, May 17, 2019.

  1. #1
    I want to find some javascript code which will allow this:
    SEMrush
    Content A Title
    ------------------
    ------------------
    Content B Title

    to turn into this when you press a plus button and when you press a minus button it returns

    Content A Title
    ------------------
    Content A Here (Pictures and Text as designed html)
    ------------------
    Content B Title
    ,
    I have to use it 10 or so times on the screen so it needs to be able to be easily installed, short in code or shortenable by some server side or coding method.
     
    madmn, May 17, 2019 IP
    Naina S likes this.
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,795
    Likes Received:
    1,593
    Best Answers:
    229
    Trophy Points:
    515
    #2
    We can use a hidden input (so it doesn't pollute our non-screen media appearance) that we slide off screen along with the content using absolute positioning, then revert it to the normal position with display:static;

    
    <input type="checkbox" id="contentA" class="toggle_section" hidden>
    <h2><label for="contentA">Content A title</label></h2>
    <div>
    	Content A Here
    </div>
    
    <input type="checkbox" id="contentB" class="toggle_section" hidden>
    <h2><label for="contentA">Content B title</label></h2>
    <div>
    	Content B Here
    </div>
    
    Code (markup):
    In the CSS the adjacent sibling selector should take care of the rest without any wasteful / extra classes.

    
    .toggle_section,
    .toggle_section + h2 + div {
    	/*
    		IE screws up hidden INPUT making LABEL not click on it.
    		Massive negative height so the absolute doesn't make the
    		scroll bigger than it should be.
    	*/
    	display:block;
    	position:absolute;
    	left:-999em;
    	top:-999em;
    }
    
    .toggle_section:checked + h2 + div {
    	position:static; /* turn off positioning */
    }
    
    
    .toggle_section + h2:before {
    	content:"+";
    	display:inline-block;
    	width:1.5em;
    	line-height:1.5em;
    	background:#CCC;
    }
    
    .toggle_section:checked + h2:before {
    	content:"-";
    }
    
    Code (markup):
    The +/- button is a bit rough around the edges, so adjust that styling as desired. Might be some typo's as this is a drive-by post from the laptop, but should give you the gist of what I'm saying to do.

    Basically this isn't JavaScript's job anymore. In fact this approach can even be used to create slide-in/out animations, fade in/out, etc, etc. (an extra DIV may be needed depending on the effect)

    Oh and of course, adjust the numbered headings to the depth appropriate to the document structure.
     
    deathshadow, May 23, 2019 IP
  3. Naina S

    Naina S Active Member

    Messages:
    203
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    93
    #3
    When you are developing some code in any language, make sure you build it in step by step manner. Here you want + and - signs to open and close panels and show their contents to the users. So you will have to following steps to performs:

    1. Show an img tag which show + and - signs on clicking.
    2. When the img tag is clicked you also open and close the corresponding panel to show it's content.
    3. Make sure all the other panels remain close i.e. only one panel opens up on clicking the + sign.

    So in order to make it you will need 2 images in your website. One for showing the + sign and other for showing the - sign. Now with this, you make the HTML as shown below:

    
    <div class="parentDiv">
        <div class="showHidePanel">
            <img src="Image/plus.jpg" />
            <div class="contentPanel">
              // put your content here
            </div>
        </div>
       <div class="showHidePanel">
            <img src="Image/plus.jpg" />
            <div class="contentPanel">
              // put your content here
            </div>
        </div>
        <div class="showHidePanel">
            <img src="Image/plus.jpg" />
            <div class="contentPanel">
              // put your content here
            </div>
        </div>
    </div>
    
    Code (markup):
    Make sure you make the contentPanel div display none initially. You do this with CSS:

    
    .showHidePanel .contentPanel{
      display: none;
    }
    
    Code (markup):
    Now you create the click event code for the img tag which does the whole work, see below:

    
    $(".showHidePanel> img").click(function (e) {
      var currval = $(this).parents(".showHidePanel").find(".contentPanel");
    
      if ($(currval).is(":visible")) {
        currval.hide("fast", "swing");
        $(this).attr("src", "Image/minus.jpg");
      } 
      else {
        currval.show("fast", "swing");
        $(this).attr("src", "Image/minus.jpg");
      }
    });
    
    Code (markup):
    The code is very short and just have some 10 lines. It simply checks the visibility of the contentPanel div. If it is hidden it shows and makes the + sign on the img tag to - sign and vice versa. You can also look into this very good tutorial on the same thing.

    I did the explaining on the code step by step manner so that you can know exactly how to build codes by yourself. Coding is very easy if you make it in step by step.

    Thank you...
     
    Naina S, Jun 17, 2019 IP